ngModel更改多选

Question

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

问题是，当我更改第一个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}