web-dev-qa-db-ja.com

パイプを書き込まずにngFor内の値でアイテムをフィルタリングする

次のコンポーネントがあります。

class MyComponent {
  public mode = 'v';
  readonly modes = ['v', 'a', 'd'];
  ....
}

次に、ngForを使用して、modesに保存されている現在のモードを除く、modeのすべてのモードのボタンを表示します。私は次のコードを持っています：

<button *ngFor="let othermode of modes">
  {{ othermode }}
</button>

常に2つのボタンを表示し、残りの2つのモードを含めたい。私はこれを試しました：

<button *ngFor="let othermode of modes.filter(elem => elem !== this.mode)">
  {{ othermode }}
</button>

しかし、それは機能していません。私が見たすべての質問は、この機能のカスタムパイプを記述するために必要でしたが、値だけを使用して文字列の配列をフィルタリングする簡単な方法はありませんか？

angularngfor
7
Dane

使用できます：

<ng-container *ngFor="let othermode of modes">
  <button *ngIf="othermode!=mode">
    {{ othermode }}
  </button>
</ng-container>
5
Vivek Doshi

フィルター関数を使用してデータをフィルター処理します。

filterFunction(your_collection): any[] {  
    return your_collection.filter(i => i.field.value === filterKey);
}

そしてテンプレートで：

*ngFor="let value of filterFunction(datasource)"

または、existコンポーネントを使用します。スレッドを見る：

https://stackoverflow.com/a/50071762/433206

14
Wedson Quintanilha da Silva

NgIfでng-templateを使用します。条件付きで配列を反復処理する場合。以下はサンプルコードです。ここで 作業バージョンを見つけることができます

<ng-template ngFor let-othermode [ngForOf]="modes">
<button *ngIf="othermode!=mode">
  {{ othermode }}
</button>
</ng-template>
0
Prithivi Raj