Угловое 2 сохранить выбранное значение после перебора массива для выбора

Question

Я хотел бы сохранить значение в select, когда массив элементов «перезагружен», когда исходный выбранный элемент находится в новом массиве, в противном случае я хочу, чтобы он выбирал по умолчанию (пустое значение).

Я создал plunker here

В примере вы можете увидеть выбранный автомобиль еще автомобиль вы выбрали даже при обновлении списка. Теперь мне нужно добавить код для повторного выбора выбранного автомобиля в списке.

<select [ngModel]="selectedCar || ''" (ngModelChange)="setSelectedCar($event)"> 
    <option value="">--select a car--</option> 
    <option *ngFor="let car of cars" [ngValue]="car">{{ car.brand }} - {{ car.model }}</option> 
</select> 

<br> 
<br> 

<label>Selected car:</label> <span *ngIf="selectedCar">{{ selectedCar.brand }} - {{ selectedCar.model }}</span> <span *ngIf="!selectedCar">none selected</span> 

Причина я использую одну сторону переплета и использовать ngModelChange, чтобы иметь возможность по умолчанию (--Выберите car--) функциональность.

Но когда я обновляю список, я получаю пустое выбранное значение в select (edit: in chrome).

Answer 1

Проблема в том, что вы связываете выпадающее меню с объектом. При изменении списка объектов выбранное значение (объект) больше не входит в список и поэтому не может быть снова выбрано. То, что вам нужно будет сделать, - после того, как выбранный список изменен, снова установите выбранный символ в соответствующий новый объект, который эквивалентен ранее выбранному объекту.

Смотреть это отредактированный plunker: https://plnkr.co/edit/HKpBLx?p=preview

Обратите внимание, как в src/select-widget.ts file я добавил следующий блок:

ngOnChanges() { 
    if (this.selectedCar) { 
     this.selectedCar = this.cars.find(i => i.brand === this.selectedCar.brand 
      && i.model === this.selectedCar.model); 
    } 
} 

Вы, вероятно, лучше использовать что-то вроде ID, чтобы найти правильный автомобиль снова , но это должно помочь вам встать на пути.