Angular 6 - невольное изменение текста при множественном выборе

Question

Я создал множественный выбор, используя *ngFor со списком. У меня есть возможность создавать новые выборки динамически с помощью кнопки, но теперь существует проблема с согласованностью выбора.

<div *ngFor="let marketSelected of marketTypeListSelected; let i = index">
    <select class="form-control" (change)="onChange($event.target.value, i)"  required>
      <option value="" disabled selected>Choose a market available</option>
      <option *ngFor="let market of marketTypeListAvailable" [value]="market.name + '@'+ market.marketType" [selected]="market.name == marketSelected.name && market.marketType == marketSelected.marketType">{{market.name}} - {{market.marketType}}</option>
    </select>
  </div>

Если я добавлю одну и ту же опцию в два выбора, и я изменю верхний вариант на другое изменение текста, но назначенное ему значение все равно будет правильным.

Это происходит только с двумя выборами и не обязательно быть следующим. Это может быть между первым и третьим или вторым и четвертым.

Пример

Базовый пример

Пример изменил первый выбор

Выход на консоль во время смены

изменить значение первого выбора

Примечание Я не использую ngModel, потому что я получаю данные из другого списка и ngModel изменил атрибуты этого списка.

Демо https://stackblitz.com/edit/bug-angular-select

Answer 1

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

Я создал вспомогательный список с именами из предыдущего списка.

auxMarketTyleListSelected: string[] = [] ;
ngOnInit(){
    for(let ms of this.marketTypeListSelected){
       this.auxMarketTyleListSelected.push(ms.name + '|' + ms.marketType);
    }
}

После этого я изменил интерфейс для реализации нового выбора

 <div *ngFor="let marketSelected of auxMarketTyleListSelected; let i = index">
    <select (change)="onChange($event.target.value, i)"  required>
      <option value="" disabled selected>- Select a market from get selections -</option>
      <option *ngFor="let market of marketTypeListAvailable"
              [value]="market.name + '|'+ market.marketType"
              [selected]="market.name == marketSelected.split('|')[0] && market.marketType ==marketSelected.split('|')[1]">
        {{market.name}} | {{market.marketType}}
      </option>
    </select>
  </div>

Здесь демонстрация Stackblitz с решением моей проблемы.