Javascript 如何使用ngModelChange过滤angular 4中的对象值？

我试图创建一个输入字段，通过“description”属性名过滤使用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）

时，它正在过滤，但是列表没有改变。有什么想法吗？

当您运行

searchFilterData

时，您没有保存状态

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

---

如果您知道只需要按描述进行筛选，则可以仅对该字段使用

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

如果您的查询是

product 001

，则您的筛选列表（

filterData

）将被删除

---

尝试在ngFor中的filterData上使用异步管道。它将使filterData成为可观察到的更改监视。尝试使用

async

如下：

*ngFor=“let data of（filterData | keys）| async”

，但我得到了一个错误。我还包括从'@angular/common'导入{AsyncPipe}。我使用的

键

管道是为了获得prop.name和value。过滤后的数据将是一个未定义的数组values@BougarfaouiElhoucine你能帮我做一次闪电战吗？@MikeTung，这给了我一个错误，表示无法读取未定义的属性“description”。@Takebo您的筛选逻辑返回一个未定义的数组。我认为您的筛选逻辑太复杂，无法满足您的需要。您好@LLai，这种方法可以工作，但我不会改变筛选数据，因为当我删除输入字段上的字符时，它不会返回完整列表。@Takebo您可以将完整列表的副本存储在另一个属性中

this.data=//来自api的数据；this.filterData=this.data.slice（0）

这将允许您恢复列表，例如当

query=”“

另一种解决方案是向列表中的每个对象添加另一个属性，例如

isFiltered

，然后根据其是否已过滤，将该属性设置为true或false。在您的ngFor中，使用

[hidden]

指示显示/隐藏列表项谢谢！创建了另一个变量来保存您提到的初始状态。就性能而言，您认为哪种方式更好，克隆对象还是添加新属性？@Takebo在处理较小的列表时，我会说是新属性。我认为，与仅仅通过[hidden]指令添加display:none相比，继续重新呈现克隆列表的成本更高。在处理较大的数据集时，我会使用克隆列表+分页。在大多数情况下，小列表的性能差异可能可以忽略不计。我知道，是的，采用克隆方法是因为注册的产品超过50万种。根据数据大小，我可能会考虑使用这两种方式。谢谢你花时间！帮了我很多忙。

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