Как отобразить фактическое значение в раскрывающемся списке и, возможно, установить другой параметр из этого списка - PullRequest
Новая
       9

Как отобразить фактическое значение в раскрывающемся списке и, возможно, установить другой параметр из этого списка

0 голосов
/ 11 июня 2018

Как показать фактически выбранную опцию из выпадающего списка и после растягивания списка других доступных элементов.Теперь у меня есть выпадающий список только с доступными элементами, которые я могу выбрать элемент. HTML: 

        <div class="pb-1">
          <label class="small">Car:</label>
          <select formControlName="Car" class="form-control">
              <option *ngFor="let x of cars" [ngValue]='x.id'>{{x.id}} : {{x.carName}}</option>
          </select>
        </div>

Машинопись: 

export class PersonDetailsComponent implements OnInit {
 cars : Car[];
.
.
.
populateCars()
{
  this.personsService.getCars().subscribe(result => {
    this.cars = result;
});
}

лицСервис: 

getCars() :Observable<Car[]>
    {  
        return this.http.get(this.apiUrl + 'AviableCars')
                        .map((result)=>result.json());
    };

1 Ответ

0 голосов
/ 11 июня 2018

Вам необходимо использовать атрибут [selected].Я бы также добавил параметр «Пожалуйста, выберите» по умолчанию: 

<option value="" disabled selected> <!-- default selected -->
  Please select a car
</option>
<option *ngFor="let x of cars" [ngValue]='x.id' [selected]="Car.id === x.id">
  {{x.id}} : {{x.carName}}
</option>

Атрибут [selected] требует выражения, которое оценивается как true или false.Если true, он выделит этот элемент (x.id) в списке.

Так что здесь мы проверяем, что Car.id (из вашей модели) соответствует x.id в * ngFor - так что выражение будетоценивается для каждого x в ngFor, и один из них, конечно, должен быть истинным.

Подробнее здесь и здесь

...