当内容在 Angular 2 中呈现时，如何修复 mat-checkbox 动画挂起/冻结？答案

【问题标题】：How to fix mat-checkbox animation hang/freeze when content is rendering in Angular2+?当内容在 Angular 2 中呈现时，如何修复 mat-checkbox 动画挂起/冻结？
【发布时间】：2019-08-15 03:20:37
【问题描述】：

我在 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 时，复选框的动画挂起，看起来很糟糕。 在这种情况下是否有可能修复此 mat-checkbox 挂起/冻结动画？

【问题讨论】：

标签： angular angular-material angular-animations

【解决方案1】：

您可以在@angular/core 中使用ChangeDetectorRef。

像这样使用ChangeDetectorRef，

在你的构造函数中添加检测器

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

和this.cdr.detectChanges() 你想要的地方

example

【讨论】：

感谢您的快速回答，实际上我看不出有什么区别，复选框动画仍然挂起/冻结...也许还有其他想法？
是的，setTimeout 解决了问题，但也许还有其他方法？因为用户需要额外等待 500 毫秒才能看到项目。如果没有其他可能，我稍后会接受这个答案
如果可以的话，你可以使用等待 gif。比如更新答案链接