Angular 8：从 JSON 服务器获取数据并使用复选框过滤表中的数据

Question

我正在研究 angular 项目，需要有关如何使用表格中的复选框过滤数据的帮助。 我有一个家庭组件，其中使用服务以表格格式从 json 服务器显示数据。 我有另一个过滤器组件，我在其中实现了过滤器。 如果用户单击过滤器，则表中的数据应根据复选框输入而更改。

加载表的 Home.component.ts 文件

       export class HomeComponent implements OnInit {
      SearchValue: any;
      p:number = 1;
      constructor(public rs:RestService) {}
   
      @ViewChild(MatSort, { static: true }) sort: MatSort;
      @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
      dataSource = new MatTableDataSource();
        ngOnInit(): void {
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
        this.rs.getUsers().subscribe((Response) => {
         this.dataSource.data=Response;
         })
      }
    displayedColumns: string[] = ['empId','name', 'email', 'mobile', 'gender'];
}

filter.component.html 中的复选框示例

<div *ngFor = "let obj of filter">
    <input type="checkbox" value="{{obj.value}}" (change)=filterChange($event)> {{obj.key}}
  </div>

服务.ts 文件

<pre><code>
export class RestService {
constructor(private http:HttpClient) { }
url:string = "http://localhost:3000/Users";
getUsers() {
return this.http.get<Users[]>(this.url);

}

Answer 1

filterChange(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
}