Question

我正在使用异步管道将数据传递给子组件，但我希望按“mimetype”的值过滤数据。但是，当我添加我的过滤器时，我不会选择添加到流中的任何新对象。例如;以下工作完美

<asset-list [assets]="assets$ | async"></asset-list>

在子组件内部

我循环遍历资源以显示列表。但是，如果我添加我的过滤管道，例如

<asset-list [assets]="assets$ | async | imageFilter"></asset-list>

我不再接受对流的任何更改。我的管道内容如下：

import { Injectable, Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'imageFilter'
})
@Injectable()
export class AssetImagesPipe implements PipeTransform {

    transform(assets: any[] ) {

        var images = [];

        for( let i in assets ) {

            if( assets[i].mimetype.substring(0,5) == 'image' )
            {
                images.push( assets[i] );
            }
        }

        return images;
    }
}

非常感谢任何建议。

Answer 1

有两种可能的方式：

将管道设置为pure: false（https://angular.io/guide/pipes#pure-and-impure-pipes）

或在async-pipe之前使用..

不纯管：

@Pipe({
    name: 'imageFilter',
    pure: false
})
export class AssetImagesPipe implements PipeTransform {

    transform(assets: any[] ) {
      if (!assets || !assets.length) return [];
      return assets.filter(...);
    }
}

在async-pipe之前：

@Pipe({
    name: 'imageFilter$'
})
export class AssetImagesAsyncPipe implements PipeTransform {

    transform(assets$: Observable<any[]>) {
      if (!assets$) return undefined;
      return assets$.map(assets => assets.filter(...));
    }
}

请参阅我的plunker：https://plnkr.co/edit/Q2Yw2TjdpGqA4dWBxfZ0?p=preview

Angular / 2 |过滤异步流

1 个答案: