Angular：IE 11 中 [style.display] 的奇怪行为 - 双向绑定不起作用

Question

您好，我正在开发一个网络应用程序，目标浏览器是 IE-11 及以上版本。我正在使用 [style.display] 来隐藏或显示我的组件之一中的元素。代码如下

    <cm-configure-add-cart class="configure" 
                       [style.display]="(configWorkflowComp.visible == false) ? 'none' : 'initial' ">
    </cm-configure-add-cart>

这似乎不起作用。当我检查开发工具时，我看到 style="display: none" 即使 configWorkflowComp.visible is true

的值

但是如果我将代码更改为（从显示到不透明度）

<cm-configure-add-cart class="configure" 
                   [style.opacity]="(configWorkflowComp.visible == false) ? 0 : 1 ">
</cm-configure-add-cart>

一切正常，元素显示。

为什么会这样。 angular 双向绑定是否不适用于 [style.display] 还是我在这里遗漏了什么？。请帮帮我。

编辑：

我也试过 ngStyle 如下

[ngStyle]="{'display': configWorkflowComp.visible === false ? 'none' : 'initial'}"

这个也没用。

我已经尝试过基于 class 的方法，效果很好。但我的问题是，为什么 [style.display] 不起作用！？

Answer 1

试试这个方法，

有一个class,.d-none { display: none}

使用以下格式添加您的样式，

<cm-configure-add-cart class="configure" [ngClass]="{'d-none': !configWorkflowComp.visible}"> </cm-configure-add-cart>

Answer 2

原来 IE 不支持初始属性。将其更改为阻止解决了该问题。

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/initial

Angular：IE 11 中 [style.display] 的奇怪行为 - 双向绑定不起作用

Angular: Weird behavior of [style.display] in IE 11 - Two way binding not working

angular

angular5

angular7