javascript - 如何使用 ngModelChange 过滤 Angular 4 中的对象值？

Question

我正在尝试创建一个输入字段，通过“描述”属性名称过滤使用 ngFor 生成的列表。该列表是一个像这样的对象:

[
 { code: 001, description: "Product 001 description" },
 { code: 002, description: "Product 002 description" },
 { code: 003, description: "Product 003 description" },
 { code: 004, description: "Product 004 description" }
]

我的功能:

seachFilterData(e) {
    const query = e;
    this.filterData.map((items) => Object.values(items).forEach(value => {
      return Object.keys(value).filter(k => {
        if (value.toLowerCase().includes(query.toLowerCase())) {
          return items;
        }
      });
    }));
  }

HTML:

<input type="text" class="tokenfield-search" placeholder="search" [ngModel]="searchFilter" value="" (ngModelChange)="seachFilterData($event)">
<div class="tokenfield-list">
  <ul>
    <li *ngFor="let data of filterData | keys">

当我console.log(items)时，它正在过滤，但列表不会改变。有什么想法吗？

Answer 1

如果您知道只需要按描述进行过滤，则可以仅在该字段上与 indexOf 进行比较，并根据需要进行过滤。

seachFilterData(e) {
    const query = e;

    // convert to lowercase to do case insensitive search
    const query = e.toLowerCase();

    this.filterData = this.filterData.filter(item => item.description.toLowerCase().indexOf(query) !== -1);
}

如果您的查询是产品 001，您的过滤列表 (filterData) 将为

[
    { code: 001, description: "Product 001 description" }
]