javascript - Angular:模板重新呈现数组，而其长度不变

Question

这是父组件的模板:

<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 之后被调用...

关于如何防止重新渲染有什么想法吗？

Answer 1

RTFM，正如他们所说。

trackByFn 来拯救 - 这是解决我的问题的简单而正确的方法。关于这个 gem 的更多信息:
https://angular.io/api/common/NgForOf#ngForTrackBy
https://www.concretepage.com/angular-2/angular-4-ngfor-example#trackBy