Question

我有一个用Angular 4编写的视频应用程序。在这个应用程序中，用户可以添加视频和字幕，并在列表中编辑视频标题。列表中的标题始终与视频当前播放时间同步。当视频当前时间更改时，将更改列表视口以显示当前标题。标题的数量始终保持不变，用户无法添加或删除项目只能编辑标题文本。当有很多字幕（> 500）时，应用程序的工作速度非常慢。我想过根据列表视口创建和销毁ngFor中的项目，但似乎要做很多工作。有没有更好的解决方案（不使用pagging） [！[

＆＃13;

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;
    }
}

＆＃13;

<!--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>

＆＃13;

] 2

Answer 1

我建议您将部分列表或仅显示可见字幕。如果这不是您的解决方案，请尝试将更改检测设置为 ChangeDetectionStrategy.OnPush并在列表的父元素上设置click事件，以避免一千次事件点击（对于每一行）。如果您的翻译具有ID trackBy: trackByFn

的ID跟踪

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

当您设置更改检测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更改检测器未被触发。

Angular - ng对于性能问题

1 个答案: