[英]How to use @Input to set a Pipe in a *ngFor directive
I have a component that has 3 input parameters 我有一个具有3个输入参数的组件
How can I make it so the name_filter
is set as the pipe to filter that group of data? 我
name_filter
,以便将name_filter
设置为过滤该组数据的管道?
@Input('json_columns') columns:[{}];
@Input('json_rows') rows:[{}];
//Pipe
@Input('name_filter') filter:string;
<tr *ngFor="let item of filas | filter: searchItem; let i=index" >
{{item.nombre}}
</tr>
One way to do this is to create a function 'getFilas()' and implement the filter in the function 一种方法是创建一个函数“ getFilas()”并在该函数中实现过滤器
See this example: https://stackblitz.com/edit/angular-filter-data-in-component 参见以下示例: https : //stackblitz.com/edit/angular-filter-data-in-component
This is the template 这是模板
<div *ngFor="let item of getData(); let i=index">
{{i}} - {{item.name}} {{ item | json }}
</div>
This is the relevant code in the component 这是组件中的相关代码
@Input() field: string;
@Input() value: string;
@Input() data: any[];
getData() {
return this.data.filter((item) => {
return item[this.field] == this.value;
})
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.