Используя [(ngModel)] двухстороннюю привязку данных с ngFor, массив не обновляет значения строк

Я создал эту форму: введите описание изображения здесь

Вот HTML-код:

<table class="table table-hover table-bordered table-striped table-highlight">
  <thead>
    <tr>
      <th *ngFor="let cell of tableData2.headerRow">{{ cell }}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of tableData2.dataRows">
      <td *ngFor="let cell of row">
        <input type="text" class="form-control border-input" [(ngModel)]="cell" name="cell" />
      </td>
    </tr>
  </tbody>
</table>

Вот соответствующий машинописный код:

declare interface TableData {
  headerRow: string[];
  dataRows: string[][];
}
public tableData2: TableData;
this.tableData2 = {
  headerRow: ['Version', 'Approbateur(nom+fonction)', 'Principales remarques', 'Date d\'approbation'],
  dataRows: [
    ['ahmed', '', '', ''],
    ['', '', '', ''],
    ['', '', '', ''],
    ['', '', '', ''],
    ['', '', '', ''],
    ['', '', '', ''],
    ['', '', '', ''],
  ]
};

Как вы могли заметить, двусторонняя привязка данных работает «в одном направлении», значение «ahmed» действительно отображается.
Однако, когда я изменяю значение ввода в таблице следующим образом:
введите здесь описание изображения И затем я консольLog переменную tableData2:
введите описание изображения здесь Как вы могли заметить, новое значение SAM не обновляется в переменная tabledata. Т.е. двусторонняя привязка данных не работает, и я не могу получить значения из таблицы.
Что я сделал не так?


angular ngmodel angular2-ngmodel angular-ngmodel
person AG_HIHI    schedule 12.08.2019    source источник

Ответы (2)


arrow_upward
9
arrow_downward

Двусторонняя привязка не работает со значением массива, требуется обновить какой-то объект

Итак, первое изменение - это let i = index; и [(ngModel)]="row[i]":

<td *ngFor="let cell of row; 
        let i = index;
        trackBy: customTrackBy
        ">
    <input type="text" class="form-control border-input" [(ngModel)]="row[i]" name="cell" />
</td>

Второе изменение: (проблема показана в демонстрации)

// Your list will be reloaded again by ngFor when you change one field value, 
// and it will lose the focus. 
// You can add a trackBy to determine if the list must or must not be reloaded. The code below seems to solve the issue:

customTrackBy(index: number, obj: any): any {
    return index;
}

РАБОЧАЯ ДЕМО ( С решением + проблемой)

person Vivek Doshi    schedule 12.08.2019
comment
@AhmedGhrib, рад знать, удачного кодирования, кстати :) - person Vivek Doshi; 12.08.2019

arrow_upward
0
arrow_downward

Я не уверен, можно ли привязать этот способ к примитивным типам. Если бы вы могли сделать строку объектом и привязать ввод к одной из переменных объекта, я знаю, что это работает, просто попробовал :)

person Charlie Araya    schedule 12.08.2019