angular - Hur man sätter ett TypeScript-variabelvärde som CSS-egenskap?

Jag har en bild (inuti ett materialkort) som ändras var 30:e sekund. Jag har bildens höjd (som en TS-variabel) och jag vill sätta den som höjden på den laddade bilden. Jag provade följande metod men jag tror att syntaxen är fel. Vad är rätt metod?

@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);}

Svar #1

Delen {'min-height': '{{taille}}'} bör faktiskt vara {'min-height': taille}.
Angular-dokumentationen visar nedanstående mycket liknande exempel:

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

Från din exempel kod verkar det som att taille initialt är undefined, vilket du kanske vill ta hänsyn till (initiera taille eller använd en ngIf eller annat tillvägagångssätt).

Svar #2

Använder [ngStyle] -

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

Eller så kan du använda [style.min-height]="taille" istället.

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

vänligen gå igenom detta för fler insikter.

Relaterade artiklar