ngModel 改变多项选择

Question

我在多个 select 上使用 ngModel 时遇到问题。我使用一个数组 schedule 构建一个 table，并且在每个 td 中我放置一个 select 并与 schedule 条目绑定。

问题是，当我更改第一个 select 时，第二个也会更改。我不明白为什么。

这是 stackblitz 上的一个工作示例：https://stackblitz.com/edit/angular-ivy-agbsye

这是 app.component.ts 文件

export class AppComponent  {
  options = ["TC", "1BAC", "2BAC"]
  schedule = []
  constructor(){
    for(let i = 0; i < 7; i++){
      this.schedule[i]= [];
      for(let j = 0; j < 8; j++){
        this.schedule[i][j] = ''
      }
    }
  }
}

这是 app.component.html 文件

<table>
  <tr *ngFor="let day of schedule;let i=index">
    <ng-container *ngFor="let hour of schedule[i];let j=index">
      <td>
      <select [(ngModel)]="schedule[i][j]">
            <option [ngValue]="''" selected>
            </option>
            <ng-container *ngFor="let level of options" >
            <option  [ngValue]="level">
              {{level}}
            </option>
            </ng-container>
          </select>
      </td>
      <td *ngIf="j==3" style="width:20px;height:20px;background:black"></td>
    </ng-container>
  </tr>
</table>

Answer 1

您还可以：

Add in template trackBy: 
<ng-container *ngFor="let hour of schedule[i];let j=index; trackBy:trackByFn">

Implement in component:
trackByFn(i) {return i}

ngModel 改变多项选择

ngModel change multiple selects

select

ngmodel

angular