NgFor display last element

user_8821688 0
Viewed 2709

I have array of objects

[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>

And in html i have 3 inputs, all bind only last element from array?

but when i use {{seat.xrow}} and {{seat.yplace}} that display fine that i expected

How do two-way data binding with input tag. Each input has unique index from array not last element?

edit: and i have that

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

ReservationAdminDto.model.ts has a form:

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;
  }
}
ngfor angular
2 Answers

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>
user_10099220

The issue is a tracking issue : [(ngModel)] creates new variables, and it can't bind to object properties properly. use a custom track by function to get a grip on it : 

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

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