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 中引发的错误：

参数为空

所以这不起作用：

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

我可以以某种方式使用 async 的结果作为自定义管道的参数传递吗？或者我应该订阅我的类中的 observable 并创建另一个类变量？

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) ) );
    }
}