Angular ngStyle 指令不起作用：样式属性不会更新-angular-IT问答社区-解决你的IT疑问

Angular ngStyle 指令不起作用：样式属性不会更新

myleftshoe 2月前

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

帖子版权声明 1、本帖标题：Angular ngStyle 指令不起作用：样式属性不会更新
本站网址：http://xjnalaquan.com/
2、本网站的资源部分来源于网络，如有侵权，请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点，并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
5、站长邮箱：yeweds@126.com 除非注明，本帖由myleftshoe在本站《angular》版块原创发布，转载请注明出处！

最新回复 (0)

最新倒序只看楼主

imolinuevo 2月前 0 只看Ta

引用 2楼

感谢您的回复，我再次编辑了问题。看来问题不在于 CSS，而在于 Angular 更改检测。
AXRG 2月前 0 只看Ta

引用 3楼

@Master_T 请在 stackblitz 中复制，否则请检查元素并检查哪些 CSS 正在干扰
Patrick Perea 2月前 0 只看Ta

引用 4楼

我尝试过隐藏，但结果相同。我单独测试了“collapse”（没有 ngStyle，仅通过 CSS），它甚至在 div 上也能正常工作，所以问题出在其他地方……
Matt Fletcher 2月前 0 只看Ta

引用 5楼
更新：

您已启用 OnPush 变更检测策略。

发生组件或浏览器/用户事件（按钮点击） @Inputs 时才会触发变化检测

详细了解 angular 文档

这就是为什么异步调用没有更新 UI，而你必须这样做 this.cdRef.detectChanges();

确保将 CommonModule 或 NgStyle 指令导入到组件中，只有这样指令才会起作用。

或 NgStyle 所需的指令 NgClass .
```
...
@Component({
     selector: '...',
     standalone: true,
     imports: [CommonModule],
    ...
})
export class SomeComponent {
    ...
```
如果它是独立的-> 导入应该在组件的导入数组中。

如果它是模块化的->转到模块，将组件添加到声明数组并添加导入。