Angular: шаблон переопределяет массив, в то время как его длина не изменяется - PullRequest
0 голосов
/ 11 декабря 2018

Вот шаблон родительского компонента:

<ng-container *ngFor="let set of timeSet; index as i">
    <time-shift-input *ngIf="enabled"
        [ngClass]="{ 
            'mini-times' : miniTimes, 
            'field field-last': !miniTimes,
            'field-central': !canAddSet,
            'field-central--long': (canAddSet || canDeleteSet) && !miniTimes }"
        [startHour]="set.startHour" 
        [endHour]="set.endHour"
        [endsNextDay]="set.endsNextDay" 
        [canAddSet]="canAddSet()"
        [canDeleteSet]="canDeleteSet(i)"
        [required]="true"
        (onAddSet)="onAddSet(i)"
        (onDeleteSet)="onDeleteSet(i)"
        (onChange)="onShiftTimes($event, i)"></time-shift-input>
</ng-container>

Вот код, который будет обновлять массив timeSet после запуска события onChange:

public onShiftTimes( set: TimeSchedule | Array<TimeSchedule>, ind?: number ): void {
    if ( ind !== undefined ) {
        this.timeSet[ind] = <TimeSchedule>set;
    } else {
        this.timeSet = <Array<TimeSchedule>>set;
    }
    this.timeChanged.emit({
        data: this.timeSet,
        di: this.dayIndex
    });
}

дочерний компонент, <time-shift-input> перерисовывается каждый раз, когда вызывается метод onShiftTimes, ДАЖЕ, когда длина массива остается неизменной.

Что является обломом, потому что это нарушает пользовательский опытраздражающим способом (убирает фокус и т. д.).Я думал, что нажатие ИЛИ для обновления индекса существующего массива не изменит ссылку на объект для массива, поэтому цикл ngFor не будет запущен.Однако ngOnInit в <time-shift-input> вызывается каждый раз после onShiftTimes ...

Есть идеи, как предотвратить повторный рендеринг?

1 Ответ

0 голосов
/ 11 декабря 2018

RTFM, как говорится.

trackByFn на помощь - это было простое и правильное решение моей проблемы.Больше на этом драгоценном камне:
https://angular.io/api/common/NgForOf#ngForTrackBy
https://www.concretepage.com/angular-2/angular-4-ngfor-example#trackBy

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...