如何在 angular 中使用 ngFor 循环中的 ngModel 正确绑定数组？

Question

我在 ngFor 循环中使用 ngModel 从单个输入框中获取值，如下所示：

  <mat-card class="hours"  >
  <table id="customers">
      <thead >
          <th >Project</th>
          <th *ngFor="let day of weeks">{{day | titlecase}}</th> //weeks is one week dates
          <th>Total Hours</th>
          <th></th>
      </thead>

      <tbody>
        <tr *ngFor="let employee of projectTasks; let i = index">
            <td>{{employee.Project}}</td>
            <td *ngFor="let day of weekdays"> //weekdays are monday to saturday
                <input type="number" [id]="day" [(ngModel)]="employee[day]" class="hours-input">
            </td>
            <td class="total-cell">{{getTotalHours(employee)}}</td>
            <td>
              <button mat-icon-button class="codered" (click)="deleteproject(employee, i)" >
                  <mat-icon >delete</mat-icon>
              </button>
          </td>

        </tr>

      </tbody>

  </table>
  <button mat-raised-button color="primary" class="submit" (click)="CreateTimeSheet()" >Submit</button>

我的打字稿：

 addProject(): void {
    this.pProjectId++;
  this.projectTasks.push({

    projectId: this.projectData[0].projectdetails[0]._id,
    Project: this.selected,
    monday: 0,
    tuesday: 0,
    wednesday: 0,
    thursday: 0,
    friday: 0,
    saturday: 0,
    sunday: 0,
  });
  console.log(this.projectTasks, "entered data");     
  }

在 ng for 循环中使用 ngModel 绑定一个数组请参考我附上的图片任何人都可以帮助我如何做任何帮助感谢。

Answer 1

我们需要在 ngFor 中使用 trackBy，如下所示，我添加了 Plunker 示例 link。

@Component({
  selector: 'my-app',
  template: `
  <div>
    <div *ngFor="let item of toDos;let index = index;trackBy:trackByIndex;">
      <input [(ngModel)]="toDos[index]" type="number" placeholder="item">
    </div>
    Below Should be binded to above input box
    <div *ngFor="let item of toDos">
      <label>{{item}}</label>
    </div>
  </div>
  `,
  directives: [MdButton, MdInput]
})
export class AppComponent { 
  toDos: string[] =[1,2,3];
  constructor() {}
  ngOnInit() {}
  trackByIndex(index: number, obj: any): any {
    return index;
  }
}

Example Plnkr

谢谢

如何在 angular 中使用 ngFor 循环中的 ngModel 正确绑定数组？

How properly bind an array with ngModel from ngFor loop in angular?

typescript

angular-material

angular