angular - 如何使用 @Input 在 *ngFor 指令中设置管道

Question

我有一个有 3 个输入参数的组件

1. json_columns
2. json_rows
3. 名称过滤器

我怎样才能使它name_filter被设置为过滤该组数据的管道？

组件.ts

@Input('json_columns') columns:[{}];
@Input('json_rows') rows:[{}];

//Pipe 
@Input('name_filter') filter:string;

组件.html

<tr *ngFor="let item of filas | filter: searchItem; let i=index" >
{{item.nombre}}
</tr>

标签： angularangular6angular-directivengfor

Answer 1

一种方法是创建一个函数“getFilas()”并在函数中实现过滤器

请参阅此示例：https ://stackblitz.com/edit/angular-filter-data-in-component

这是模板

<div *ngFor="let item of getData(); let i=index">
    {{i}} -  {{item.name}} {{ item | json }}
</div>

这是组件中的相关代码

  @Input() field: string;
  @Input() value: string;
  @Input() data: any[];

  getData() {
    return this.data.filter((item) => {
      return item[this.field] == this.value;
    })
  }