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

Posted 2023-02-22

【中文标题】如何使用 @Input 在 *ngFor 指令中设置管道

【英文标题】：How to use @Input to set a Pipe in a *ngFor directive

【发布时间】：2019-02-05 17:35:32

【问题描述】：

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

json_columns json_rows name_filter

如何才能将name_filter 设置为过滤该组数据的管道？

component.ts

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

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

component.html

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

【问题讨论】：

你有多少这样的pipes？为什么不使用单个pipe，然后按名称、id 等过滤properties，而不是使用多个过滤器。

【参考方案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;
    )