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 个输入，都只绑定数组中的最后一个元素？

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

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

编辑：我有那个

  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

此问题是跟踪问题：[(ngModel)] 创建了新变量，但无法正确绑定到对象属性。按功能使用自定义轨道来掌握它：

<div class="row-place" *ngFor="let seat of reservation.seats; let i = index; trackBy: customTB">

customTB(index, item) {
  return `${index}-${item.xrow}-${item.yplace}`
}

Answer 2

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

要绑定正确的项目值，请通过将循环索引附加到每个名称来确保输入名称是唯一的（参见 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>

NgFor 显示最后一个元素

NgFor display last element

ngfor

angular