Как улучшить производительность рендеринга?

Question

У меня есть служба, которая добавляет каждый раз данные ответа в массив: group: [].

Где ответ является объектом:

{"items": [{"id": 1}, {"id": 2}, {"id": 3}]}

Проблема в том, что он отображается так долго в шаблоне и отображает каждый раз, когда в массив поступают изменения group:

<div class="SearchResultGroup" *ngFor="let layer of group">
   <div class="SearchResultGroup" *ngFor="let l of layer.items"></div>
</div>

Как повысить производительность рендеринга?

Answer 1

Вы можете контролировать, когда происходит обнаружение изменений, используя ChangeDetectionStrategy.OnPush в вашем компоненте.

@Component({
  selector: 'my-component',
  templateUrl: './my.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent  {
  constructor(private changeDetector: ChangeDetectorRef) { }

  someMethod(): void {
    // do lots of heavy stuff

    // now trigger change detection

    this.changeDetector.detectChanges();
  }
}

Добавление changeDetection: ChangeDetectionStrategy.OnPush в декоратор означает, что вы сообщите Angular, когда следует запускать обнаружение изменений .

this.changeDetector.detectChanges() сообщает Angular, что вы готовы к запуску обнаружения изменений.

Эта стратегия означает, что вы можете тихо обновить свою модель и инициировать обнаружение изменений в одном go.