我正在尝试在Angular 4中绑定ID和名称

我正在尝试进行绑定，因此数组中有一个元素列表，具有类似键的id和类似值的名称。 所以我创建了一个搜索输入字段，当我键入name时，它会在数组中进行搜索，但问题是当我单击这个绑定时，它会像这样工作，它会在数组中单击id为key的列表，在输入字段中，它会显示名称，在我的情况下，它是value。 这是向我显示名称（值），但没有选择键或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>

这是搜索方法

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;

---

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

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

---

如何将对象绑定到HTML模板？共享HTML代码我在那里编辑了问题您可以找到HTML模板我编辑了代码，现在您可以找到HTML，所以也许你能找到一个方法，这是如何工作的。它正在工作，但在输入中，它现在向我显示Id，我想显示名称，这是可能的，我会让你的答案现在被接受。奇怪。。。如果保持

{{c.value}}

不变，它应该显示名称。你也改变了吗？您只需更改点击手柄中的c.id。这是我更改的内容，我将更新问题。我不去碰{c.value}}，但是我在问题中添加了更多的代码，你可以看到这个searchTermah是什么，所以你的问题是你想在这个.searchTerm中存储id和值？然后，不应该将键绑定到它，而应该使用key-value对象本身。请参阅更新#2

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