angular – 如何使用@Input在* ngFor指令中设置Pipe

发布时间：2020-12-17 17:11:49 所属栏目：安全来源：网络整理

导读：我有一个有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; com

我有一个有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>

解决方法

一种方法是创建一个函数’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;
    })
  }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!