Question

我有对象数组

{{seat.xrow}}

在html中，我有3个输入，所有输入仅绑定数组中的最后一个元素？

但是当我使用{{seat.yplace}}和reservation: ReservationAdminDto = { seats: [], email: '', phoneNr: '' };时，显示的效果很好，我期望的是

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

编辑：而我有

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

ReservationAdminDto.model.ts 具有以下形式：

export class SeatDto {

  xrow: number;
  yplace: number;

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

SeatDto.model.ts

<h3 class="order-status" id="order_status"><?php echo $order->status; ?></h3>

Answer 1

您的*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>

Answer 2

问题是一个跟踪问题：[(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}`
}

NgFor显示最后一个元素

2 个答案: