在材料表中搜索不适用于管道 [英] Search in material-table not working with pipe

问题描述

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

In my material table I use @pipe to get name instead of position in position row...

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

I get a name from another JSON file...

<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; 
  }
}

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

And now when I try to use SEARCH BOX in angular-material table to search by name there is no data, but if I enter position number I get filtered data properly.

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

Probably, problem is because datatables data is taken from a component but pipe change data in html...

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

How to TELL mat-table to also search by piped data in table?

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

Here is working example, try to search by the name (Nitrogen, Helium etc...) https://stackblitz.com/edit/angular-ttg6ux?file=src/app/table-filtering-example.ts

Thnx

推荐答案

请在下面的URL中进行引用:

Please refer below URL :

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

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

Please let me know if you face any difficulty.

谢谢:)

这篇关于在材料表中搜索不适用于管道的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！