NgStyle 不适用于条件？

Question

谁能告诉我这个有效

[style.height]="events?.length === 0 ? 'calc(100vh - 105px)' : null"

但这不是吗？

[ngStyle]="{'height: calc(100vh - 105px)': events?.length === 0 }"

还是这个？

[style.height]="{'calc(100vh - 105px)': events?.length === 0 }"

Answer 1

在ngStyle上，您需要将带有值的样式属性作为json数据。在那个 json 数据上，键应该 style 名称，值应该是 css 属性值，如下所示。

[ngStyle] = "{ 'height': events?.length === 0 ? 'calc(100vh - 105px)' : null }"

但是在你的代码中，

[ngStyle]="{'height: calc(100vh - 105px)': events?.length === 0 }"

您已将完整的 [style name]: [style value] 作为 json 数据的密钥，它不会对 ngStyle 起作用。

和[style.height]表示在stylehtml属性上的heightcss属性。 所以[style.height]="'100px'"和style="height: 100px;"的意思是一样的。

在这段代码中，

[style.height]="{'calc(100vh - 105px)': events?.length === 0 }"

您已将 json 对象放入 style.height 中，这是不可接受的，因为 height css 属性值因此无法正常工作。