Почему сбрасываются input поля, two data binding Angular 4?

Question

[Konstantin Kudelko]

У меня есть массив, я вывожу элементы через *ngFor, далее у меня есть метод удаления и добавления элементов в массив. Все это находится в форме. Я исользую two way data binding. Когда я удаляю первый элемент, через splice, а затем пушу новый элемент, он добавляется с пустыми полями, но при этом предыдущий также обновляется и поля сбрасываются, почему?

Метод добавления:

public onAddDirector(): void {
        if (this.directors.length >= 1) {
            this.showRemoveDirector = true;
        }
        this.fileSelectedDirectors.push(undefined);
        this.directors.push(new Director('', '', 2, '', {}, []));
    }

Метод удаления:

public onRemoveDirector(indexOfDirector: number): void {
        if (this.directors.length === 2) {
            this.showRemoveDirector = false;
        }
        this.directors = this.directors.slice();
        this.directors.splice(indexOfDirector, 1);
        this.fileSelectedDirectors.splice(indexOfDirector, 1);
    }

HTML:

<div class="form-group clearfix" 
                 *ngFor="let director of directors; let i = index;">
                <div class="row">
                    <h3 class="col-sm-12 control-label user-form__second-title">{{"Person" | translate}} {{i+1}} *</h3>
                </div>
                <div class="col-sm-12">
                    <label class="col-sm-3 control-label">{{"First name*" | translate}}</label>
                    <div class="col-sm-9 form-group clearfix">
                        <input type="text" 
                               class="person-name form-control"
                               name="directorFirstName_{{i}}"
                               [(ngModel)]="director.firstName"
                               #directorFirstName="ngModel"
                               required/>
                        <div *ngIf="directorFirstName.errors && (directorFirstName.dirty || directorFirstName.touched || formMandatoryValidation)"
                            class="alert alert-danger customer-error-messages alert-form-errors">
                            <div [hidden]="!directorFirstName.errors.required">
                                {{"The field is required" | translate}}
                            </div>
                        </div>
                    </div>
                </div>
</div

Спасибо!

Comments

[kulaeff]

Возможно проблема в том, что slice() копирует ссылки на объекты, а не сами объекты. Таким образом, изменения в новом массиве будут видны и в старом, и наоборот.

[Konstantin Kudelko]

kulaeff: дело в том, что когда я консолю массив, там все есть, и все верно, проблема в обновлении ui.

[Роман]

А что делает
this.directors = this.directors.slice();
в методе onRemoveDirector ?

вы копируете один и тот же массив сам в себя ?
вообще, не достаточно кода, чтобы разобраться ?

где вызываются onRemoveDirector и onAddDirector - с какими параметрами ?