我使用 Angular 6,我想过滤异步管道的结果,然后在 UI 中呈现它们。
这是我现在的代码
this.results = this.form.get('name').valueChanges.pipe(
filter(formdata => formdata.name.length > 0),
switchMap( formdata => this.service.getNames(formdata.name))
);
和模板
<div *ngIf='results | async ; let items'>
<div *ngFor='let item of items'>{{item.id}} {{item.name}} </div>
</div>
从管道中,我得到了一些 ID 和名称。我已经有一个 id 数组。我想过滤管道的 id,而不是渲染已经在数组中的那些。
所以,这就是我尝试做的。
array = [{id:1,name:'one'},{id:2,name:'two'}];//I already have this
新版本的管道过滤器
this.results = this.form.get('name').valueChanges.pipe(
filter(formdata => formdata.name.length > 0),
switchMap( formdata => this.service.getNames(formdata.name)) ,
filter(checkIfResultIdInArray())//pseudocode
);
假设
checkIfResultIdInArray
是我创建的函数。过滤并返回所有不在 array
中的 id .所以最终出现在模板中的 ids/names 不是 {id:1,name:'one'},{id:2,name:'two'}
.或者也许我可以以某种方式过滤模板?
最佳答案
@Davy 的回答是我自己会做的。然而,另一种选择是使用管道。如果您想重用此功能,这是要走的路。
@Pipe({name:'filterOnId'})
export class FilterOnIdPipe implements PipeTransform {
transform(list : MyObject[], acceptedIds : number[]){
return list.filter(item => acceptedIds.indexOf(item.id) > -1);
}
}
并在模板中
<div *ngFor='let item of results | async | filterOnId : acceptedIds'>
{{item.id}} {{item.name}}
</div>
请注意以下几点:
您使用自定义管道的方式与使用内置管道的方式相同。
您必须将管道包含在 AppModule 的声明数组中
如果你选择将管道注入(inject)到一个类中,你必须在你的 NgModule 的 providers 数组中提供它。
关于 Angular 6 过滤异步管道结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53180787/