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，如果与true相比，这将导致== 0。

Stacblitz编辑：

正如你已经附上了Stackblitz（非常好！）Iv修改了你的代码 - 没有闪烁效果。

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

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

我做了什么：Iv将disabled添加到按钮，因此最初被禁用。所以基本上这样的解决方案就像我在删除的答案中指出的那样，有人贬低了我们。

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

Answer 2

在声明时，您应该为 selectedTasks 变量指定一个空数组。例如

public selectedTasks: yourArray = [];

此外，您可以在“按钮”中使用[disabled]="!selectedTasks.length"代替[disabled]="selectedTasks.length == 0"。

要进行更多调试，您可以在组件的console.log(selectedTasks)和constractor() { in here }功能中添加ngOnInit() { in here }。所以你可以在你的控制台中看到组件加载时发生了什么。

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

2 个答案: