Массив ng Для данных отсутствует / исчезает

Question

У меня есть следующий угловой компонент 6, чтобы добавить новых пользователей с HTML-таблицей:

пользователя add.component.html

[...]
<tbody>
    <tr *ngFor="let value of data.pos; let i = index">
        <td><input matInput [(ngModel)]="value.username" name="pos-{{i}}-username"></td>
        <td><input matInput [(ngModel)]="value.firstname" name="pos-{{i}}-firstname"></td>
        <td><input matInput [(ngModel)]="value.lastname" name="pos-{{i}}-lastname"></td>
    </tr>
</tbody>
[...]

пользовательский add.component.ts

export class UserAddComponent {

    data: any = {
        pos: [{modell: '', user: '', asset: '', serial: ''}]
    };

    addPosition(){
        this.data.pos.push({modell: 'c', user: '', asset: '', serial: ''});
        console.log(this.data);
    }

    removePosition(pos){
        this.data.pos.splice([pos],1);
        console.log(this.data);
    }

Когда я нажимаю на кнопку вызова addPosition() Кнопка и заполнение всех полей ввода работает без проблем.

Проблема: когда я нажимаю кнопку удаления, вызывающую функцию removePosition(1) убрать второй ряд он исчезает как надо. Но когда я нажимаю на addPosition снова, чтобы добавить новую строку, данные первой строки 0 исчезают из таблицы html. Console.log() в addPosition по-прежнему выводит правильные данные для позиции 0, но они не видны в полях ввода для строки 0.

Answer 1

Это проблема отслеживания. Зацикливая объекты и используя двустороннюю привязку к их свойствам, вы заставляете Angular сходить с ума.

Предоставьте ему собственный трек по функциям, как этот

<tr *ngFor="let value of data.pos; let i = index; trackBy: value.id">

(ID = уникальный идентификатор для каждого объекта)

Или вот так

<tr *ngFor="let value of data.pos; let i = index; trackBy: customTB">

customTB(index, item) {
  return `${index}-${item.id}`;
}

(Вы можете вернуть то, что вы хотите, пока его уникальный)

Answer 2

Вы тестируете на каком браузере? Потому что я проверил твой код и не понял симптомов, которые ты указал.