Question

在我的材料表中，我使用@pipe来获取名称，而不是位置行中的位置 ...

我从另一个 JSON 文件中获得了一个名称 ...

<ng-container matColumnDef="position">
      <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.position | FilterData }} </mat-cell>

@Pipe({
  name: 'FilterData'
})
export class OrdinalPipe implements PipeTransform {

  transform(value: Element): string {
    var data =   ElementTitle.filter(
          ElementTitle => ElementTitle.position === value);  // ElementTitle is second JSON file
          return  data[0].name; 
  }
}

现在，当我尝试使用角材料表中的搜索框按名称进行搜索时，没有数据，但是如果输入位置编号< / strong>我可以正确过滤数据。

问题可能是因为数据表数据是从组件中获取的，但是管道更改了html中的数据...

如何告诉mat-table也通过表中的管道数据进行搜索？

这里是工作示例，请尝试按名称搜索（氮，氦等）。 https://stackblitz.com/edit/angular-ttg6ux?file=src/app/table-filtering-example.ts

Thnx

Answer 1

如果您使用的是材料表，建议您也使用MatTableDataSource。在打字稿开头声明它，并加载它的数据，就像它是数组还是列表一样。

datasource :MatTableDataSource<any>;

someMethodToLoadData(){
   // get your data
   this.datasource = new MatTableDataSource<any>(data);
}

现在有了数据源，您可以使用其本机属性 filter ：

打字稿

filterTable (filterValue :string) { 
   this.datasource.filter = filterValue.trim().toLowerCase(); 
}

html

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

Answer 2

请在下面的URL中引用：

https://stackblitz.com/edit/angular-ttg6ux-sokueh?file=src/app/table-filtering-example.ts

如果您遇到任何困难，请告诉我。

谢谢：）

在材料表中搜索不适用于管道

2 个答案: