javascript - Angular-ngFor性能问题

我有一个用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

最佳答案

我建议您以部分显示或仅以可见标题显示列表。如果这不是解决方案，请尝试将更改检测设置为
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更改检测器未触发。

关于javascript - Angular-ngFor性能问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46281053/