angular - NgFor 显示最后一个元素

Question

我有对象数组

[0: {yplace: 11, xrow: 4}1: {yplace: 12, xrow: 4}2: {yplace: 13, xrow: 4} ]

<div class="row-place" *ngFor="let seat of reservation.seats; let i = index" >
  {{seat.xrow}} <input [(ngModel)]="seat.xrow" name="row" type="number" min="0" class="place form-control signup-row">
  {{seat.yplace}} <input [(ngModel)]="seat.yplace" name="place" type="number" min="0" class="place form-control signup-row">
</div>

在 html 中我有 3 个输入，都只绑定(bind)数组中的最后一个元素？

但是当我使用 {{seat.xrow}} 和 {{seat.yplace}} 时，显示效果符合我的预期

如何与输入标签进行双向数据绑定(bind)。每个输入都有来自数组的唯一索引而不是最后一个元素？

编辑:我有那个

  reservation: ReservationAdminDto = {
    seats: [],
    email: '',
    phoneNr: ''
 };

ReservationAdminDto.model.ts 有一个表单:

export class ReservationAdminDto {
  email: string;
  phoneNr: string;
  seats: SeatDto[];
}

SeatDto.model.ts

export class SeatDto {

  xrow: number;
  yplace: number;

  constructor (
    xrow: number,
    yplace: number,
  ) {
    this.xrow = xrow;
    this.yplace = yplace;
  }
}

Answer 1

您的 *ngFor 循环可能在 form 标记内。由于循环中的输入元素具有相同的名称，因此它们显示数组中的最后一个值，如 this stackblitz 所示。 .

要绑定(bind)正确的项目值，请通过将循环索引附加到每个名称来确保输入名称是唯一的(请参阅 this stackblitz):

<div class="row-place" *ngFor="let seat of reservation.seats; let i = index" >
  <input [(ngModel)]="seat.xrow" [name]="'row'+i" type="number" min="0" class="place form-control signup-row">
  <input [(ngModel)]="seat.yplace" [name]="'place'+i" type="number" min="0" class="place form-control signup-row">
</div>