角度/ 2 |非同期ストリームをフィルタリングする

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

2つの方法があります。pure: false（https://angular.io/guide/pipes#pure-and-impure-pipes）

またはその非同期パイプの前にそれを使用するようにパイプを設定し

..

不純なパイプ：

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

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

非同期パイプ前：

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

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

私のプランナーを参照してください：https://plnkr.co/edit/Q2Yw2TjdpGqA4dWBxfZ0?p=preview