angular - 一起使用自定义管道和异步管道

Question

在我的项目中，我有一个自定义管道来过滤列表:

@Pipe({name: 'filterList'})
export class FilterListPipe implements PipeTransform {
  transform(value: string[], arg: string[]): any {
    if (!value) return value;
    return value.filter( el => !arg.includes(el));
  }
}

我按如下方式使用这个管道:

<md-select placeholder="Grupos" (change)="changeGroup($event)">
  <md-option 
    *ngFor="let group of (allGroups | async) | filterList : (userDetail | async)?.groups" 
    [value]="group">
    {{ group }}
  </md-option>
</md-select>

问题是我收到了 FilterListPipe 中引发的错误:

arg is null

所以这是行不通的:

let group of (allGroups | async) | filterList : (userDetail | async)?.groups

我能否以某种方式使用异步的结果作为自定义管道的参数传递？或者我应该在我的类中订阅可观察对象并创建另一个类变量？

Answer 1

我解决了我的问题:

我必须将自定义管道放在异步管道之前。像这样:

*ngFor="let group of allGroups | filterList : (userDetail | async)?.groups | async"

现在 tranform 函数中第一个参数的值是一个可观察值，所以:

@Pipe({name: 'filterList'})
export class FilterListPipe implements PipeTransform {
    transform(value: Observable<any>, arg: string[]): any {
        return value
            .map( groups => groups.filter( el=> !arg.includes(el) ) );
    }
}