Angular - 防止模板渲染时元素颜色闪烁

Question

在我的 Angular 6 应用程序中，我有一个按钮应该保持禁用状态，直到用户选择表格中的一行。

当我浏览到组件时，有一个小的闪烁效果，按钮从启用（红色）闪烁到禁用。

您可以在此处查看（左下角的删除按钮）： https://www.useloom.com/share/b165c30f8912420182d02791066ec9f4

我处理它的方式非常简单。我有一个数组，它计算所选行数。如果此数组的长度为 0，则应禁用该按钮：

<button mat-fab color="warn" [ngClass]="{'button-follow-1': true}" (click)="onDeleteTask()" [disabled]="selectedTasks.length == 0" matTooltip="Delete">
  <mat-icon class="mat-36" aria-label="Delete Task" >delete</mat-icon>
</button>

在组件 Typescript 中，我在 NgOnInit 中将数组长度设置为 0，但闪烁效果仍然存在。

我也尝试过将数组长度属性包装在 SetTimeout 1ms 函数中，并使用 *NgIf 有条件地显示按钮，但它在视觉上并不优雅。

有没有更好的解决方案？

谢谢

Answer 1

将selectedTasks.length == 0 更改为selectedTasks.length === 0

在组件中用空数组初始化你的数组。 Dony，您在控制台中有一些异常吗？

selectedTasks.length 有可能解析为undefined 或null，如果与== 0 相比，这将导致true。

Stacblitz 编辑：

由于您已附加 Stackblitz（非常好！） Iv 修改了您的代码 - 没有闪烁效果。

问题是，您必须最初将按钮设置为禁用。这不是比较问题 - 设置 [disabled]='true' 具有相同的效果。

https://stackblitz.com/edit/angular-ork7az?file=src/app/app.component.html

我做了什么：我在按钮上添加了disabled，所以它最初是禁用的。所以基本上他们的解决方案就像我在我删除的答案中指出的那样有人投反对票:)

但公平地说，对我来说，它看起来像是 Angular Material 中的错误。也许你可以在 github 上提出问题。

Answer 2

您应该在声明 selectedTasks 变量时为其分配一个空数组。例如

public selectedTasks: yourArray = [];

您还可以在按钮中使用[disabled]="!selectedTasks.length" 而不是[disabled]="selectedTasks.length == 0"。

要进行更多调试，您可以在组件的constractor() { in here } 和ngOnInit() { in here } 函数中添加console.log(selectedTasks)。这样您就可以在控制台中看到组件加载时发生的情况。