我正在尝试在 Angular 17 应用程序中使用 [ngStyle] 指令来动态显示或隐藏元素，如下所示：
我正在尝试在 Angular 17 应用程序中使用 [ngStyle] 指令来动态显示或隐藏元素，如下所示：
<div [ngStyle]="{visibility: loaded ? 'collapse' : 'visible' }">
...
</div>
我的组件中的布尔属性在 loaded 哪里
问题是：这不起作用。它 visibility 在开始时根据的初始值正确设置了属性 loaded ，但此后如果我在某个时候更改了 loaded visibility的值，则不会相应更改。我是不是错过了一些基本的东西？我也尝试过用 [style] 而不是， [ngStyle] 但结果完全一样。
编辑：这是我在组件中的导入：
imports: [
NgIf,
ProgressBarModule,
NgStyle,
CommonModule
],
编辑2：经过进一步测试，似乎Angular loaded 由于某种原因没有检测到属性的变化。如果我注入 ChangeDetectorRef 到组件并手动触发变化检测，如下所示：
this.loaded = true;
this.cdRef.detectChanges();
它开始正常工作。请注意，翻转属性的代码 loaded 位于 Promise ...内部，这可能是问题吗？ Promise Angular 通常不会自动检测到块内部所做的更改吗？
您已启用 OnPush 变更检测策略。
发生组件或浏览器/用户事件（按钮点击） @Inputs 时才会触发变化检测
详细了解 angular 文档
这就是为什么异步调用没有更新 UI，而你必须这样做 this.cdRef.detectChanges();
确保将 CommonModule 或 NgStyle 指令导入到组件中，只有这样指令才会起作用。
或 NgStyle 所需的指令 NgClass .
...
@Component({
selector: '...',
standalone: true,
imports: [CommonModule],
...
})
export class SomeComponent {
...
如果它是独立的-> 导入应该在组件的导入数组中。
如果它是模块化的->转到模块，将组件添加到声明数组并添加导入。