Угловой и даталист

Question

Мне нужна помощь, чтобы понять, как использовать HTML datalist с угловым. У меня есть объект здесь. Я хотел бы, чтобы раскрывающийся список отображал 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 в 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}}

машинописный файл

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