Angular 角度6-多次选择非自愿更改文本

我使用带有列表的

*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>

选择一个市场
{{market.name}-{market.marketType}

如果我将相同的选项放在两个选项中，并更改顶部的一个选项，则会更改另一个文本，但指定给它的值仍然正确

这只发生在两次选择时，不必是下一次选择。它可以介于第一个和第三个或第二个和第四个之间

示例

更改第一个选择的值

注意 我不使用

ngModel

，因为我从其他列表获取数据，并且

ngModel

更改了该列表的属性

演示

---

我仍然不知道为什么会出现这个问题，但我已经用另一种方法解决了这个问题，实现了select

我用上一个列表的名称创建了一个辅助列表

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

之后，我更改了前端以实现新的select

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

-从获取选择中选择市场-
{market.name}{{market.marketType}

在这里，我的问题的解决方案