Angular 6 - 多项选择不由自主地更改文本答案

【问题标题】：Angular 6 - Multiple select change text involuntarilyAngular 6 - 多项选择不由自主地更改文本
【发布时间】：2019-02-09 15:30:01
【问题描述】：

我使用带有列表的*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>

如果我将相同的选项放在两个选择中，并且我将顶部的一个更改为另一个文本更改，但分配给它的值仍然正确。

这只发生在两次选择中，不一定是下一次。它可以在第一个和第三个之间，也可以在第二个和第四个之间。

示例

Basis example

Example changed the first select

Console output during the change

改变第一个选择的值

注意我不使用ngModel，因为我从其他列表中获取数据，而ngModel 更改了该列表的属性。

演示 https://stackblitz.com/edit/bug-angular-select

【问题讨论】：

标签： angular typescript angular5 angular6

【解决方案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 demo 解决了我的问题。

【讨论】：