angular ngstyle 拒绝样式并被忽略

Question

angular ngstyle 拒绝样式。我正在尝试限制容器的大小。在初始页面加载时，我将初始宽度设置为 1100。但是使用 ng 样式会忽略样式。为什么？

这个有效:

 <mat-card style="width:1100px;">

这不起作用:

  cardwidth = 1100;  //set in TypeScript

 [style.width.px]="cardwidth"
 [style.width]="cardwidth + 'px'"
 [ngStyle]="{'width.px': cardwidth}"

Answer 1

你差不多明白了。您的语法略有修改。不是将 px 添加到键 - width，而是将其添加到变量名称，如下所示:

HTML:

<p [ngStyle]="{'width': width + 'px'}">
    Custom width
</p>

typescript :

width: string
constructor() {
    this.width = "100";
}

Demo