angular 6 过滤异步管道结果

Question

我使用 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. 所以最终出现在模板中的 ids/names 不是{id:1,name:'one'},{id:2,name:'two'}.

或者我可以以某种方式在模板中过滤？

Answer 1

@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 的声明数组中包含你的管道 如果你选择将你的管道注入一个类，你必须在你的 NgModule 的 providers 数组中提供它。

Answer 2

我想这就是你想要做的：

this.results = this.form.get('name').valueChanges.pipe(           
  filter(formdata => formdata.name.length > 0), 
  switchMap( formdata => this.service.getNames(formdata.name)) ,
  map(names => names.filter(n => checkIfResultIdInArray(n)))
);

通常，在这样的设置中，我还会添加 debounceTime 运算符以防止太多请求。