我正在尝试在Angular 4中绑定ID和名称 [英] I am trying to bind an ID and the name in Angular 4

问题描述

我试图建立一个绑定，所以我在数组中有一个元素列表，它们的键像id一样，值像name一样.因此，我创建了一个搜索输入字段，在其中输入名称时，它会在数组中进行搜索，但是问题是当我单击此绑定时应如此，它单击数组中具有ID的列表(以我为例)是键，并且在输入字段中显示了我的名字，在我看来，它是值.这向我显示了名称(值)，但是没有选择键或ID，因此应用程序无法正常工作.下面是代码.

I am trying to make a bind, so I have a list of elements in the array the have the key like id and the value like name. So I created a search input field and there when I type name it makes a search in the array, but the problem is when I click this bind should work like this, it clicks that list in the array with the id which in my case it is key and in the input field it shows me the name which in my case it is value. This is showing me the name(value) but then is not selecting the key or id and the application is not working. Below is the code.

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

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

Here is when I select an element in the list of the array.

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

推荐答案

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

first, bind the complex object, not just it's value:

selectProduct(complexObject) {
this.searchTerm = complexObject;

修改过滤器以仅过滤值:

Modify your filter to only filter the value:

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和名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！