Изменение значения в связанной таблице Angular с помощью [(NgModel)] влияет на другие поля

Question

У меня есть таблица с полями длиной 1 символ, которая генерируется * ngFor из двумерного массива, определяемого как:

<table>​
    <tr *ngFor="let row of table; index as i">
        <td *ngFor="let field of row; index as j">
            <input type="text" [(ngModel)]="table[i][j]" type="text" maxlength="1" contenteditable="true" />
        </td>​
    </tr>​
</table>​

Идея состоит в том, чтобы позволить пользователю Измените содержимое table визуальным способом и сразу же получите модифицированную таблицу для обработки ее содержимого.

Проблема возникает при изменении значения в одном поле, так как оно случайным образом влияет на другие поля в та же строка. Я воссоздал проблему со случайными значениями по следующей ссылке:

Демонстрация StackBlitz

Answer 1

Вы можете исправить это, добавив функцию " trackBy " в ваши циклы * ngFor. Обновленная демонстрация StackBlitz на https://stackblitz.com/edit/angular-t7f9hx