Question

我有一张图像（在材料卡内），每30秒更改一次。我具有图像的高度（作为TS变量），我想将其设置为已加载图像的高度。我尝试了以下方法，但我认为语法错误。什么是正确的方法？

@Component({
selector: 'app-live',
templateUrl: 

 <mat-card [ngStyle]="{'min-height': '{{taille}}'}">
  <img  mat-card-image [src]="profileUrl | async " alt="Streaming de la culture" #img [ngStyle]="{'padding-top':'0px' }" (load)="dosomething(img)">
 </mat-card>

export class LiveComponent implements OnInit {

taille;

dosomething(img) { console.log(img.clientWidth, img.clientHeight);
                   this.taille = img.clientHeight;
                   console.log(this.taille);}

Answer 1

使用[ngStyle]-

<mat-card [ngStyle]="{'min-height': taille}">

或者您也可以使用[style.min-height] = "taille"。

<mat-card [style.min-height] = "taille">

请访问this以获取更多见解。

Answer 2

{'min-height': '{{taille}}'}部分实际上应该是{'min-height': taille}。
角度documentation给出了以下非常相似的示例：

<div [ngStyle]="{'color': colorPreference}">

从示例代码看来，taille最初是您可能要考虑的undefined（初始化taille或使用ngIf或其他方法）。

如何将TypeScript变量值设置为CSS属性？

2 个答案: