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>

如果我在两个选择中都放入了相同的选项，而我更改了前一个，则又更改了文本，但是分配给它的值仍然正确。

只有两个选择才会发生，而下一个则没有必要。它可以在第一个和第三个之间，也可以在第二个和第四个之间。

示例

Basis example

Example changed the first select

Console output during the change

更改第一次选择的值

注意我不使用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 demo包含我的问题的解决方案。

角度6-多项选择会自动更改文本

1 个答案: