угловая форма модели массива

Question

export class TestComponent implements OnInit {
    models: Model[];
    ngOnInit() {
        // a bunch of Observable pipes and subscriptions one of which sets the models
    }
    add(): void {
        let newModel = {...};
        this.models.push(newModel);
    }
}

И HTML:

<form *ngIf="models" (ngSubmit)="onSubmimt()" #modelForm="ngForm">
    <div *ngFor="let model of models; last as isLast">
        <input name="..." [(ngModel)]="model.name" />
        <button *ngIf="isLast" (click)="add()">Add</button>
    </div>
</form>

После того, как я ввел некоторые данные в форму и нажал кнопку Добавить, все ранее введенные данные исчезли. Я отладил его и обнаружил, что после Angular Framework вызывает drainMicroTaskQueue() в zone.js, данные исчезают.

Есть идеи?

РЕДАКТИРОВАТЬ: данные ушли из формы, но все еще существует в самой модели.

EDIT2: после каждого нажатия представление повторяет вновь добавленную модель и отбрасывает другие модели в массиве.

Answer 1

Проблема решена: Атрибут name ввода выглядит одинаково для всех вновь добавленных моделей, которые запутали Angular.

Answer 2

Вы пытаетесь добавить новые модели, когда нажимаете кнопку добавления - если это так, вы просто обновляете модель, попробуйте вставить новое значение для модели в отдельный массив и затем присвоить его массиву моделей

как это

add(): void {
        let anyArray: any[] = [];
        anyArray = [...this.models];
        let newModel = {...};
        anyArray.push(newModel);
        this.models = [...anyArray];
    }

Вышеописанный метод будет работать - если нет, то вы можете попробовать и нижеприведенный метод

add(): void {
            let newModel = {...};
            this.models = Object.Assign({}, newModel);
        }

Спасибо, Happy Coding !!