パイプ角度2の動的配列長

Question

パイプを使用して配列の長さを動的に表示できますか？ここに私のコードは次のとおりです。

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

@Pipe({ 
    name: 'lengthOfArray' 
}) 
export class LengthOfArrayPipe implements PipeTransform { 

    transform(value: any): number { 
    return value.length; 
    } 

} 

私はこのようにそれを使用します。私は、要素を追加または削除する機能を持っている

コンポーネント

listOfIdToExport: any[] = []; 

テンプレート

Element numer: {{ listOfIdToExport | lengthOfArray }} 

から変更が発生したときにパイプが配列の長さを更新しないという問題があります。

Answer 1

パイプが純粋であるため、配列に項目を追加または削除すると値が更新されません。角度の文書から：

角度は、 入力値の純粋な変化を検出した場合にのみ、純粋なパイプを実行します。純粋な変更は、プリミティブ入力 の値（String、Number、Boolean、Symbol）または変更されたオブジェクト参照 （日付、配列、関数、オブジェクト）への変更です。

@Pipe({ 
    name: 'lengthOfArray', 
    pure: false 
}) 

export class LengthOfArrayPipe implements PipeTransform { 

    transform(value: any): number { 
     return value.length; 
    } 

} 

：

だから、あなたはあなただけの配列を更新、オブジェクト参照を変更しないので、解決策は、すべての変更検出サイクルで値を更新するようになりますあなたのパイプの不純を作ることです

パイプhereの詳細を読むことができます。

Answer 2

より良い解決策は、listOfIdToExportアレイから要素を追加したり削除したりする方法を変更することです。パイプの汚れをなくす代わりに角度変化の検出が機能するように、配列への参照を変更することができます。