img标签内的Angular ngStyle无法动态更新

Question

有了这个模板

  <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。

样式永远不会从初始值更改。

我该怎么做才能更新样式？

Answer 1

ngStyle是这样的作品

[ngStyle] =“ {'color'：'blue'，'font-size'：'24px'，'font-weight'：'bold'}”

Answer 2

ngStyle的语法是这样

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

因此，将您的返回对象更改为此结构

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

Answer 3

代码看起来不错！ 如果您确实返回了{width: "500px", height: "400px"}我认为您应该使用{width: '500px', height: '400px'} qut {width: '500px', height: '400px'}这样的单引号返回值

我希望能提供更多帮助：）