Угловой и даталист - PullRequest
Новая
       10

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

0 голосов
/ 30 октября 2018

Мне нужна помощь, чтобы понять, как использовать 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

1 Ответ

0 голосов
/ 30 октября 2018

Использование 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)
  }
}
...