html - Angular 和数据列表

Question

我需要一些帮助来理解如何使用 HTML datalist与 Angular 。我这里有个对象。我希望下拉菜单显示 make and model的汽车。但是当你选择一个 car , selectedCar变量应该是整个汽车对象。但是input应该仍然只显示 make and model .

  cars = [{
    make: 'Ford',
    model: 'GTX',
    color: 'green'
  }, {
    make: 'Ferarri',
    model: 'Enzo',
    color: 'red'
  }, {
    make: 'VW',
    model: 'Amarok',
    color: 'white'
  }]

...

<input list="id-car" [(ngModel)]="selectedCar">
<datalist id="id-car">
  <option *ngFor="let car of cars" [value]="car">{{car.make}} - {{car.model}}</option>
</datalist>

这是一个玩这个的地方: https://stackblitz.com/edit/angular-cwmwke

Answer 1

在这种情况下，使用 datalist 并没有得到你想要的。这里是部分工作的代码。选择任何元素后，下拉列表将不会像以前那样显示。

尝试使用带有选项的选择。这个链接可以帮助你更多 DataList in Angular

html文件

<input list="id-car" [(ngModel)]="selectedCar" 
value="{{selectedCarObj.model}} - {{selectedCarObj.make}}"
(ngModelChange)="onChange()">
<datalist id="id-car">
  <option *ngFor="let car of cars" [value]="car.make">{{car.make}} - {{car.model}}</option>
</datalist>

{{selectedCarObj.model}} - {{selectedCarObj.make}}

typescript 文件

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  cars = [{
    make: 'Ford',
    model: 'GTX',
    color: 'green'
  }, {
    make: 'Ferarri',
    model: 'Enzo',
    color: 'red'
  }, {
    make: 'VW',
    model: 'Amarok',
    color: 'white'
  }];

  selectedCar = "";

  selectedCarObj = {};

  onChange = () => {
    this.selectedCarObj = this.cars.find((c)=> c  .make==this.selectedCar);
    console.log(this.selectedCarObj)
  }
}