角度和数据表

Question

我需要一些帮助来理解如何将HTMLdatalist与Angular一起使用。我这里有个目标。我想在下拉列表中显示汽车的品牌和型号。但是当您选择一辆car时，selectedCar变量应该是整个car对象。但是输入仍应仅显示品牌和型号。

  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无法实现您的愿望。。下面是部分工作的代码。选择任何元素后，下拉列表将不会像以前那样显示。

尝试使用选择与选项。此链接可以帮助您获得更多Angular中的DataList

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

打字脚本文件

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