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] 表示height html 属性上的height css 属性。 所以[style.height]="'100px'"和style="height: 100px;"意思一样。

在这段代码中，

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

您已将json 对象放入style.height，这是不可接受的height css 属性值，因此它不起作用。