Angular 获取选定的数据列表对象

Question

这种select单向绑定有效

<select [(ngModel)]="selectedLocation">
    <option *ngFor="let location of allLocationNames" [ngValue]="location">{{location.name}}</option>
</select>

selectedLocation将始终包含选定的位置对象。

这种datalist单向绑定似乎不起作用

<h4>Guest: <input type="text" name="guest" [(ngModel)]="selectedGuest" list="options">
  <datalist id=options *ngIf="allGuests">
    <option *ngFor="let guest of allGuests" [ngValue]="guest">{{guest.companyName}}</option>
  </datalist>
</h4>

selectedGuest 将不包含对象，而是包含所选元素的字符串值 (guest.companyName)。

如何在 datalist 示例中获取所选对象？

Answer 1

我找到了解决此问题的方法。您可以使用以下代码：

 <input type="text" list="productList" name="product" [(ngModel)]='currentProduct' (change)="onProductChanged(currentProduct)" />
     <datalist id="productList">
       <select>
        <option *ngFor="let product of products" [value]="product.name"></option>
       </select>
     </datalist>

在打字稿中我写道：

export class MySuperPrivateClass implements OnInit {
currentProduct: string = "";
selectedProduct: Product;

 onProductChanged(productName) {
    console.log(productName);
    this.selectedProduct = this.getSelectedProductByName(productName);
}

 getSelectedProductByName(selectedName: string): Product {
    return this.products.find(product => product.name === selectedName);
}