NGStyle 的变化并不总是反映出来

Question

我有一个采用 ng 样式的元素，但是当样式对象更改时，样式并不总是按预期应用。我特别指的是下面的 css animation，但我已经看到 background.

的类似行为

<div [ngStyle]="_innerStyle">

export class WidgetContainerComponent implements OnInit {
  _innerStyle?: {
    [klass: string]: any;
  } | null;
...
}

例如_innerStyle就是

animation: "flash"
animation-duration: "1s"
animation-iteration-count: "infinite"
background-color: "#ffffff"
box-shadow: "0px 2px 1px -1px rgba(0,0,0,.2), 0px 1px 1px 0px rgba(0,0,0,.14), 0px 1px 3px 0px rgba(0,0,0,.12)"
color: "#199719"

结果DOM：

animation: 1s ease 0s infinite normal none running flash;

并更改为

animation: "rubberBand"
animation-duration: "1s"
animation-iteration-count: "infinite"
background-color: "#b53b3b"
box-shadow: "0px 2px 1px -1px rgba(0,0,0,.2), 0px 1px 1px 0px rgba(0,0,0,.14), 0px 1px 3px 0px rgba(0,0,0,.12)"
color: "#199719"

结果DOM：

0s ease 0s infinite normal none running flash

为什么 animation-duration 突然被设置为 0s？我正在打印 JSON 对象，它没有 0s 它有 1s.

更奇怪的是，如果 animation-duration 是不同的值，它们会在更改时正确应用吗？！例如：1s 到 2s 而不是 1s 到 1s

我希望 dom 样式能够准确反映样式对象。难道我做错了什么？！有调试 ngStyles 行为的方法吗？

Answer 1

我认为这可能与变更检测有关，其中 Angular 没有启动变更检测，因为 _innerStyle 的引用（内存中的位置）没有改变。

每次 _innerStyle 在您的 TypeScript/JavaScript 中发生变化时，尝试像这样不可变地更新它：

this._innerStyle = {
   ...this._innerStyle, // keep all of the old properties (spread operator)
  color: 'red',         // change the properties here though
  'background-color': red,
};

Answer 2

我意识到animation是一个shorthand属性。
我真的很想用animation-name。

如果我要使用 animation 作为 css 属性我需要构建 shorthand 值。

通过使用单独的动画属性，动画被正确应用并且没有被 animation shorthand 属性.

覆盖

NGStyle 的变化并不总是反映出来

NGStyle Changes Not Always Reflected

ng-style

angular