时间戳

首页 > 解决方案 > ngStyle 意外行为，不更新属性更改

angular - ngStyle 意外行为，不更新属性更改

问题描述

我有点困惑为什么ngStyle没有按预期工作。我正在学习 Brad Traversy 在 Udemy 上的教程，我们被指示这样使用ngStyle：

<h3 [ngStyle]="currentStyles" >{{user.firstName}} {{user.lastName}}</h3>

这将依赖于currentStyles组件类上设置的属性，如下所示：

currentStyles = {'padding-top': this.showExtended ? '15px': '0'}

该showExtended属性是一个布尔值，由一个方法切换：

toggleExtended() {
      this.showExtended = !this.showExtended;
}

预期行为：padding-top当 this.showExtended 从 切换到 时，h3 元素上的 应该从 0 变为false15px true。该属性确实在发生变化，因为该组件的其他部分依赖于它，并且按预期运行。但是，它似乎ngStyle只在第一次渲染时进行评估，而不是在组件的属性更改时更新。

我找到的解决方案是创建一个返回函数范围变量的方法：

getCurrentStyles() {
      let styles = {
          'padding-top': this.showExtended ? '0' : '40px'
      }
      return styles;
  }

并将元素设置为

<h3 [ngStyle]="getCurrentStyles()">{{user.firstName}} {{user.lastName}}</h3>

这实际上按预期工作。总而言之：currentStyles 对象中的三元组仅在组件安装时进行评估，并且该值不会在值更改时更新。

我在这里想念什么？

标签： angulartypescriptng-style

解决方案

小更新以获得您想要的。

toggleExtended() {
      this.showExtended = !this.showExtended;
      this.currentStyles = { 'padding-top': this.showExtended ? '15px': '0' };
}

Angular 评估对currentStyles对象的更改以触发重绘。

推荐阅读