NgДля отображения последнего элемента - PullRequest
Новая
       7

NgДля отображения последнего элемента

0 голосов
/ 24 августа 2018

У меня есть массив объектов 

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

Ответы [ 2 ]

0 голосов
/ 24 августа 2018

Ваш *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>
0 голосов
/ 24 августа 2018

Проблема связана с отслеживанием: [(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}`
}
...