Question

我在Angular 7应用程序中使用了mat-checkbox（角材料UI 7.2）。当我单击mat-checkbox时，会生成一些网站内容。我的实际应用程序中只有10 ngFor个项目（复杂）。

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

我用许多ngFor的简单示例来说明我的问题。

  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时，checkbox的动画挂起，看起来非常糟糕。 在这种情况下，是否有可能修复此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)
}

example

在Angular2 +中渲染内容时如何解决mat-checkbox动画挂起/冻结的问题？

1 个答案: