Question

我正在尝试进行绑定，所以我在数组中有一个元素列表，它们具有像id一样的键和像name这样的值。所以我创建了一个搜索输入字段，当我输入名称时，它在数组中进行搜索，但问题是当我单击此绑定应该像这样工作时，它会点击数组中的那个列表，在我的情况下它是id是关键，在输入字段中它显示了我的名字，在我的情况下它是值。这向我显示了名称（值），但是没有选择密钥或ID，并且应用程序无法正常工作。以下是代码。

HTML的模板

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

这是TS

 searchTerm;
 productDropdownOptions: DropdownOption [] = [
    {key: '', value: ''}
  ];
  filteredProductDropdownOptions = this.productDropdownOptions;

这是搜索方法。

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

这是我在数组列表中选择一个元素的时候。

selectProduct(complexObject) {
this.searchTerm = complexObject.value;

Answer 1

首先，绑定复杂对象，而不仅仅是它的值：

selectProduct(complexObject) {
this.searchTerm = complexObject;

修改过滤器以仅过滤值：

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

我试图绑定Angular 4中的ID和名称

1 个答案: