[Fixed] ngModel change multiple selects


I have a problem using ngModel on multiple selects.
I use an array schedule to build a table, and in every td I put a select that I bind with the schedule entries.

The problem is that when I change the first select, the second one change also. and I can’t understand why.

This is a working example on stackblitz: https://stackblitz.com/edit/angular-ivy-agbsye

enter image description here

Here is the app.component.ts file

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

And this is the app.component.html file

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


You can also:

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

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

Leave a Reply

(*) Required, Your email will not be published