Как исправить зависание / остановку анимации mat-checkbox при рендеринге контента в Angular2 +?

Question

Я использую mat-checkbox (угловой материал UI 7.2) в моем приложении Angular 7. Есть несколько поколений контента сайта, когда я нажимаю mat-checkbox. В моем реальном приложении всего 10 нг (сложных) элементов.

<mat-checkbox (change)="onChange()">Check me! (bad animation)</mat-checkbox>
<span *ngFor="let item of items">
    {{item}}
</span>

Я делаю очень упрощенный пример со многими ng для простых предметов, чтобы продемонстрировать мою проблему.

  public items = [];

  public onChange(){
    for (let i = 0; i < 10000; i++) {
      this.items.push(i);
    }
  }

Этот пример вы можете найти здесь:

https://stackblitz.com/edit/angular-material-design-kq3s3a

Когда я нажимаю mat-checkbox, анимация флажка зависает и выглядит очень плохо. Есть ли возможность исправить эту анимацию зависания / заморозки в этом случае?

Answer 1

Вы можете использовать ChangeDetectorRef в @angular/core.

Используя ChangeDetectorRef вот так,

добавить детектор в свой конструктор

constructor(....,
    private cdr:ChangeDetectorRef) { }

и this.cdr.detectChanges() и setTimeout

public onChange(){
    let component = this;
    setTimeout(function(){
      for (let i = 0; i < 100000; i++) {
         component.items.push(i);
      }
      component.cdr.detectChanges();
    },500)
}

пример