我正在尝试在 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 通常不会自动检测到块内部所做的更改吗?