Вот шаблон родительского компонента:
<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
...
Есть идеи, как предотвратить повторный рендеринг?