Angular-ngFor性能問題

Question

我有一個用Angular 4編寫的視頻應用程序。在此應用程序中，用戶可以添加視頻和字幕，並在列表上編輯視頻標題。 列表中的字幕始終與視頻當前播放時間同步。 當視頻當前時間更改時，列表視口也會更改，以顯示當前字幕。 字幕的數量始終保持不變，用戶不能添加或刪除項目，只能編輯字幕文本。 當有許多字幕（> 500）時，應用程序運行非常緩慢。 我曾考慮過根據列表視口在ngFor中創建和銷毀項目，但這似乎需要很多工作。 是否有更好的解決方案（不使用Pagging）[！[

 import { Caption } from './caption'; export class Translation { public sourceCaption: Caption; public targetCaption: Caption; constructor(sourceCaption: Caption, targetCaption: Caption) { this.sourceCaption = sourceCaption; this.targetCaption = targetCaption; } get startTime() { return this.sourceCaption && this.sourceCaption.startTime; } get endTime() { return this.sourceCaption && this.sourceCaption.endTime; } } export class Caption{ public startTime: number; public endTime: number; public text: Array<string>; public id: String; public isFlag: Boolean; public isItalic: Boolean; public languageId: String; public clientId: String; constructor(clientId: String, languageId: String, id?: String, startTime?: number, endTime?: number, text?: Array<string>, isFlag?:Boolean, isBold?:Boolean, isItalic?: Boolean ) { this.id = id; this.clientId = id || clientId; this.startTime = startTime; this.endTime = endTime; this.text = text || new Array<string>(); this.isFlag = isFlag; this.languageId = languageId; } } 

 <!--list--> <div class="tt-translations-list"> <tt-translation-list-header></tt-translation-list-header> <div class="tt-translation-list-items-container" #container> <div class="tt-translation-list-item-container" *ngFor="let translation of translations; trackBy:i; let i = index" (click)="setEditMode(translation)"> <tt-translations-list-item [index]="i" [translation]="translation"> </tt-translations-list-item> </div> </div> </div> <!--list-item--> <div class="tt-translations-list-item" #container [ngClass]="{'selected-row': isEditMode}"> <div class="tt-translations-list-item-border-container" [ngClass]="{'visible': isEditMode}"> </div> <div class="tt-translations-list-item-source-caption-container"> <div class="source-caption-header"> <tt-translations-list-item-header [caption]="translation.sourceCaption" [index]="index"> </tt-translations-list-item-header> </div> <div class="source-caption-content-container" dir="auto"> <span *ngFor="let line of translation?.sourceCaption?.text"> {{line}} </span> </div> </div> <div class="tt-translations-list-item-target-caption-container"> <div class="target-caption-content-container"> <tt-target-caption-editor [editCaption]="translation.targetCaption"> </tt-target-caption-editor> </div> </div> </div> 

] 2

Answer 1

我建議您以部分顯示或僅以可見標題顯示列表。 如果這不是您的解決方案，請嘗試將更改檢測設置為ChangeDetectionStrategy.OnPush並在列表的父元素上設置click事件，以避免發生數千次事件單擊（每一行）。 如果您的翻譯帶有ID跟蹤，則trackBy: trackByFn

trackByFn(index, item) {
  return item.id
}

設置changedetection OnPush時，必須始終為*ngFor提供新的數組實例，例如：

let captions = [{id: 1, name: '1 caption'}];
// instead of 
captions.push({id: 2, name: 'new caption'});
// you have to do
captions = caption.concat({id: 1, name: 'new caption'});

或者如果您有對象，請避免對其進行OnPush ，因為OnPush通過比較組件輸入的引用來起作用。 盡管您沒有提供對新對象/數組的引用，而是對現有對象/數組進行了突變，但是並未觸發OnPush更改檢測器。