如何從帶有 Angular2 的組件獲取 *ngFor 之后的過濾數據

Question

我嘗試在我的組件中獲取過濾的數據列表。 鑒於我有這樣的事情：

<ng-container *ngIf=”(items | filter:search.value) as result”>
  <div *ngFor=”let item of result”>
    {{item}}
  </div>
</ng-container>

我需要從組件中獲取result 。 是的，我可以將{{result_setter(result)}}到 ng-container，並在組件中使用變量創建方法：

filtered_data;

result_setter(data) {
  this.filtered_data = data;
}

但它看起來像狗屎。 有人可以幫忙嗎？ 我發現這篇文章https://netbasal.com/using-pipe-results-in-angular-templates-430683fa2213 ，評論中的用戶也有這個問題

Answer 1

管道僅用於顯示數據。

如果您想過濾您的值並將它們放入您的組件中，請考慮在查詢更改時過濾它們。

<input type="file" [(ngModel)]="search" (input)="filterData">

filterData() {
  this.filteredData = this.data.filter(item => /* your filtering */);
}

編輯您還可以使用管道實例來過濾數據

filterData() {
  const pipe = new FilterPipe(); // Consider moving this as a class member
  this.filteredData = pipe.transform(this.data, this.search);
}