Angular 17按钮点击后属性变更未被检测，Spinner不显示

首先最直接的错误是CSS visibility属性值用错了：你模板里写的'show'不是合法的visibility取值，CSS里控制元素显示应该用'visible'，把这行代码改成：

[style.visibility]="isDeleting ? 'visible' : 'hidden'"

如果改完还是没效果，可能是Angular变更检测没及时触发，可以手动强制检测：

1. 在组件里注入ChangeDetectorRef：

import { ChangeDetectorRef } from '@angular/core';

// 组件构造函数里添加
constructor(private cdr: ChangeDetectorRef) {}

2. 设置isDeleting = true后立即调用手动检测：

doStuff() {
  this.isDeleting = true;
  this.cdr.detectChanges(); // 强制Angular更新UI

  const dialogRef = this.dialog.open(ConfirmDialogComponent, {
    width: '250px',
    data: { db: this.getSelectedDb(), answer: false }
  });

  // 后续代码保持不变...
}

另外给个优化建议：没必要用visibility控制，直接用Angular的*ngIf更简洁高效，它会直接控制DOM的渲染与否：

<mat-spinner
  diameter="35"
  strokeWidth="4"
  *ngIf="isDeleting"
>
</mat-spinner>

这样就不用写样式绑定了，逻辑更清晰。

内容的提问来源于stack exchange，提问作者Chris