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

Your *ngFor loop is probably inside a form tag. Since the input elements in the loop have the same name, they display the last value in the array, as shown in this stackblitz.

To bind the correct item values, make sure that the input names are unique by appending the loop index to each name (see 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>