admin管理员组

文章数量:1359210

export class EmployeeDetailsComponent implements OnInit {
  employees: any = [];
  public errorMsg;
  // you can define also below
  // errorMsg:any = [];
  constructor(private _employeeService: EmployeeService) {}

  ngOnInit() {
    this._employeeService.getEpmloyees().subscribe(
      data => (this.employees = data),
      error => (this.errorMsg = error)
    );
  }

  applyFilter(filterValue: string) {
    this.employees.filter = filterValue.trim().toLocaleLowerCase();
  }
}
<body>
  <p><input type="text" (keyup)="applyFilter($event.value)"></p>
  <table border="1">
    <tr>
      <th>ID</th>
      <th>NAME</th>
      <th>AGE</th>
      <th>Mobile</th>
    </tr>

    <tbody *ngFor="let employee of employees; i as index">
      <tr>
        <td>{{employee.id}}</td>
        <td>{{employee.name}}</td>
        <td>{{employee.age}}</td>
        <td>{{employee.mob}}</td>
      </tr>
    </tbody>
  </table>
</body>

export class EmployeeDetailsComponent implements OnInit {
  employees: any = [];
  public errorMsg;
  // you can define also below
  // errorMsg:any = [];
  constructor(private _employeeService: EmployeeService) {}

  ngOnInit() {
    this._employeeService.getEpmloyees().subscribe(
      data => (this.employees = data),
      error => (this.errorMsg = error)
    );
  }

  applyFilter(filterValue: string) {
    this.employees.filter = filterValue.trim().toLocaleLowerCase();
  }
}
<body>
  <p><input type="text" (keyup)="applyFilter($event.value)"></p>
  <table border="1">
    <tr>
      <th>ID</th>
      <th>NAME</th>
      <th>AGE</th>
      <th>Mobile</th>
    </tr>

    <tbody *ngFor="let employee of employees; i as index">
      <tr>
        <td>{{employee.id}}</td>
        <td>{{employee.name}}</td>
        <td>{{employee.age}}</td>
        <td>{{employee.mob}}</td>
      </tr>
    </tbody>
  </table>
</body>

Above is my code I just wanted to know what is going wrong in the filter method what I exactly need to change to make this work. and how do I fetch properly filtered data?

  • javascript
  • angular
Share Improve this question asked Dec 13, 2019 at 6:36 Saif WarsiSaif Warsi 3381 gold badge4 silver badges15 bronze badges 1
  • What does the response of your data look like? – Nicholas K Commented Dec 13, 2019 at 6:41
Add a ment  | 

4 Answers 4

Reset to default 2

Try this

export class EmployeeDetailsComponent implements OnInit {
      employees: any = [];
      allEmployees:any=[];
      public errorMsg;
      constructor(private _employeeService: EmployeeService) {}

      ngOnInit() {
        this._employeeService.getEpmloyees().subscribe(
          data => (
              this.employees = data,
              this.allEmployees=data;//You don't want to override you search data with all employee list
          ),
          error => (this.errorMsg = error)
        );
      }

      applyFilter(filterValue: string) {
         let filterValueLower = filterValue.toLowerCase();
         if(filterValue === '' ) {
             this.employees=this.allEmployees;
         } 
         else {
           this.employees = this.allEmployees.filter((employee) => employee.name.includes(filterValueLower)
         }
      }
    }

I guess the filter string should be applied to some field in the array to filter the data e.g. name:

applyFilter(filterValue: string) {
    this.employees.filter(i => i.name.toLowerCase().includes(filterValue.toLowerCase());
  }

you also don't want to apply filter on every key up, until you want to use debounce.

According to what you need, you need to use the filter() function on this.employees array and based on your requirement on which property you want to filter, either all or specific property of employee object, you can set your filter condition. Then your code will look something like this:

applyFilter(filterValue: string) {
  let filterValueLower = filterValue.toLowerCase();
  this.employees = this.employees.filter((employee) => employee.id.includes(filterValueLower) || employee.name.toLowerCase().includes(filterValueLower) || employee.age.toLowerCase().includes(filterValueLower) || employee.mob.toLowerCase().includes(filterValueLower));
}

Try like this

template.html

<input type="text" (keyup)="applyFilter($event.target.value)"></p>

ponent.ts 

applyFilter(filterValue: string) {
    let filterValueLower = filterValue.toLowerCase();
    if(filterValue === '' ) {
        this.employees
    } else {
       this.employees = this.employees.filter((employee) => 
                        employee.id.includes(filterValueLower) || 
                        employee.name.toLowerCase().includes(filterValueLower) || 
                        employee.age.toLowerCase().includes(filterValueLower) || 
                        employee.mob.toLowerCase().includes(filterValueLower));
  }
 }

本文标签： javascriptHow to filter table data in angularStack Overflow

版权声明：本文标题：javascript - How to filter table data in angular - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744080558a2587558.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。