img标签内的Angular ngStyle不会动态更新答案

【问题标题】：Angular ngStyle inside img tag not updating dynamicallyimg标签内的Angular ngStyle不会动态更新
【发布时间】：2019-06-27 20:05:36
【问题描述】：

有了这个模板

  <img  src="{{someDynamicImageSrcVar}}" 
  (load)="onImageLoad($event)"
  [ngStyle]="getImageStyle()"                
  >

图像改变并加载后，onImageLoad() 会更新一些属性。

getImageStyle() {
  const style = {
    'width.px': this.naturalWidth,
    'height.px': this.naturalHeight
  };
  console.log(style);
  return style;
}

框架调用 getImageStyle() 来返回类似

的样式

{width: "500px", height: "400px"}

但是，除了第一次调用 getImageStyle() 之外，DOM 不会更新。

样式不会从初始值改变。

样式更新应该怎么做？

【问题讨论】：

你的组件上有changeDetection: ChangeDetectionStrategy.OnPush吗？
我查了一下，它就在那里。
嗯，这可能是它没有重新渲染的原因，尝试删除它并观察
我删除了该行，但没有任何效果。我可以在 div 中看到 src 更新，但样式没有变化。我可以看到控制台中打印了正确的样式。我还在 onImageLoad 函数中尝试了 cdr.detectChanges()。
你现在可以试试@Akash Srivastav 答案吗？

标签： angular angular8

【解决方案1】：

ngStyle 的语法是这样的

[ngStyle]="{'width.px':500, 'height.px': 500}"

所以把你的返回对象改成这个结构

{ 'width.px' : 500, 'height.px' : 500}

【讨论】：

好建议。我试过了，但没有效果。现在返回的样式是 {width.px: 400, height.px: 300}。但是元素没有更新。

【解决方案2】：

ngStyle 是这样的

[ngStyle]="{'color': 'blue', 'font-size': '24px', 'font-weight': 'bold'}"

【讨论】：

【解决方案3】：

代码看起来不错！如果你真的返回了{width: "500px", height: "400px"} 我认为你应该用单引号返回值喜欢{width: '500px', height: '400px'}

我希望能帮助更多:)

【讨论】：

另一个好建议。我已经在使用单引号，但是当控制台打印样式时，它会格式化双引号。
尝试此答案force-a-components-re-rendering 以在更改后重新呈现页面