Angular 分别在列中搜索（角度7）

我想在表的每一列上使用一个过滤器。 目前我使用的是通用过滤器，但这不是正确的方法

// Component
export class AppComponent implements OnInit {
  private dataSource;
  requestData: ITest[];

  @ViewChild(MatSort) sort: MatSort;

  ngOnInit() {
    this.getRepos();
  }

  getRepos() {
    this.reportService.getAll()
      .subscribe(response => {
        this.requestData = response['tables'][0]['data'];
        this.dataSource = new MatTableDataSource(this.requestData);
        this.dataSource.sort = this.sort;
      });
  }

  tableFilter(eventValue: string) {
    this.dataSource.filter = eventValue.trim().toLowerCase();
  }
...
}

//HTML:

<mat-form-field>
  <input matInput placeholder="Filter" (keyup)="tableFilter($event.target.value)">
</mat-form-field>

<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z2">
  <ng-container matColumnDef="ID">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>
      ID
      <!-- <mat-form-field>
        <input matInput placeholder="ID" formControlName="id">
      </mat-form-field> -->
    </th>

    <td mat-cell *matCellDef="let el">{{el.ID}}</td>
  </ng-container>
  ...
</table>

//组件
导出类AppComponent实现OnInit{
私有数据源；
请求数据：ITest[]；
@ViewChild（MatSort）排序：MatSort；
恩戈尼尼特（）{
这个.getRepos（）；
}
getRepos（）{
this.reportService.getAll（）
.订阅（响应=>{
this.requestData=response['tables'][0]['data']；
this.dataSource=新MatTableDataSource（this.requestData）；
this.dataSource.sort=this.sort；
});
}
tableFilter（eventValue:string）{
this.dataSource.filter=eventValue.trim（）.toLowerCase（）；
}
...
}
//HTML:
身份证件
{{el.ID}
...

---

如何使用

FormBuilder

和formControlName分别筛选每一列？我找到了一个模块

FormControl

的示例首先，不支持您直接接触数据源。材料提供了一个高层次的抽象，所以你实际上不必自己动手

接下来，您应该使用表单控件来管理它

filter = new FormControl('');

ngOnInit() {
  this.filter.valueChanges.subscribe(value => {
    this.dataSource = new MatTableDataSource(
      this.requestData
        .filter(report => report.yourField.includes(value) 
          || report.yourSecondField.includes(value)
        )
    );
  });
}

---

首先，不支持您直接接触数据源。材料提供了一个高层次的抽象，所以你实际上不必自己动手

接下来，您应该使用表单控件来管理它

filter = new FormControl('');

ngOnInit() {
  this.filter.valueChanges.subscribe(value => {
    this.dataSource = new MatTableDataSource(
      this.requestData
        .filter(report => report.yourField.includes(value) 
          || report.yourSecondField.includes(value)
        )
    );
  });
}

---

但我有不止一个专栏。我想我需要为每一列设置一个过滤器输入字段？！不，你可以要一个，你只要改变你的状况就行了。我编辑了我的答案来突出它。是的，我理解你的方法。但是如果我在两个不同的行中的两列中有值“10”，那么表将返回这两行而不是1。这就是您所要求的，能够在多个列中搜索。这意味着你应该得到两个结果，而不是一个。我写了“分别为每一列过滤”。我认为这很清楚，但我有不止一个专栏。我想我需要为每一列设置一个过滤器输入字段？！不，你可以要一个，你只要改变你的状况就行了。我编辑了我的答案来突出它。是的，我理解你的方法。但是如果我在两个不同的行中的两列中有值“10”，那么表将返回这两行而不是1。这就是您所要求的，能够在多个列中搜索。这意味着你应该得到两个结果，而不是一个。我写了“分别为每一列过滤”。我认为这已经足够清楚了。