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"} 我认为您应该使用单个qutation返回值像{width: '500px', height: '400px'}

我希望提供更多帮助:)

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

3 个答案: