来自 ngStyle 指令的角度集样式

Question

我在这里使用 Angular 7。我想渲染*ngFor循环内的图像。所有这些图像都有不同的高度，所以我想从返回的数据中设置图像的高度。这是供参考的代码

<div *ngFor="let image of images" class="image-container">
  <img mat-card-image src="{{image.webformatURL}}">
  <p>image height:{{ image.previewHeight }}</p>
</div>

在上面的示例中，我用我想要<img>标签的{{ image.previewHeight }}来获取我的身高(以像素为单位(。寻找与此类似的解决方案

<img mat-card-image  style="height:{{ image.previewHeight }}" src="{{image.webformatURL}}">

我已经尝试过这个，但它在页面上给出错误。

Answer 1

使用 NgStyle 指令：

<img mat-card-image  [ngStyle]="{'height.px': image.previewHeight}" src="{{image.webformatURL}}">

参考： NgStyle_API

Answer 2

可以使用样式绑定语法设置特定样式。

https://alligator.io/angular/style-binding-ngstyle-angular/

<img mat-card-image 
     [style.height.px]="image.previewHeight" 
     src="{{image.webformatURL}}">