Question

我写这个方法进行搜索，但我不知道我错过了什么，因为这不起作用。我可以在数组列表中选择一个元素但不能搜索。

这是代码

private valueItems;
searchTerm;
productDropdownOptions: DropdownOption [] = [
    {key: '', value: ''}
  ];

这是构造函数：

this.store.select('valueItemDatabase').subscribe(state => {
      this.valueItems = state.valueItems;
      state.valueItems.forEach(product => {
        if (product.type === ValueItemType.PRODUCT) {
          this.productDropdownOptions.push({value: `${product.businessId} - ${product.name}`, key: product.id });
        }
      });
    });

      filterCountryList() {
        if (this.searchTerm) {
          const _term = this.searchTerm.toLowerCase();
          this.productDropdownOptions.filter(function (el: any) {
            return el.value.toLowerCase().indexOf(_term.toLowerCase()) > -1;
          });
        }
        return this.;
      }

      // set selected country
       selectCountry(value) {
        this.searchTerm = value;
      }

<app-input-field label="Filter Name/ID" style="float: left" orientation="top">
              <input type="text" [(ngModel)]="searchTerm" (keyup)="filterCountryList()">
            </app-input-field>
             <div class="table-item">
              <div class="table-item-array" *ngFor="let c of productDropdownOptions" (click)="selectCountry(c.value)" [(ngModel)]="selectedItemId" ngDefaultControl>
                <span>{{c.value}}</span>
                </div>
            </div>

Answer 1

您对filter()操作的结果没有做任何事情。

解决方案是维护两个列表：

searchTerm;
productDropdownOptions: DropdownOption[] = [/* ... */];
filteredProductDropdownOptions = productDropdownOptions;

filterCountryList() {
  if (this.searchTerm) {
    const searchTerm = this.searchTerm.toLowerCase();

    this.filteredProductDropdownOptions = this.productDropdownOptions.filter(el =>
      el.value.toLowerCase().includes(searchTerm));
    }
  } else {
    this.filteredProductDropdownOptions = productDropdownOptions;
  }
}

然后使用模板中的filteredProductDropdownOptions。

我没有任何错误，但搜索没有工作Angular 4

1 个答案: