如何使用ngModelChange过滤角度4中的对象值？

Question

I'm trying to create a input field that filters the list geneated using ngFor, by "description" property name. The list is an object like this:

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

My function:

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;
        }
      });
    }));
  }

the 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">

When i console.log(items) it's filtering, but the list doesnt change. Any thoughts?

Answer 1

If you know you only need to filter by description, you can do a compare with indexOf on just that field and filter out as needed.

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);
}

If your query is product 001 , your filtered list ( filterData ) will be

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

Answer 2

When you run searchFilterData you aren't saving the state.

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