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为空

所以这不起作用：

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

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

1 个答案: