Angular：IE 11 中 [style.display] 的奇怪行为 - 两种方式绑定不起作用答案

【问题标题】：Angular: Weird behavior of [style.display] in IE 11 - Two way binding not workingAngular：IE 11 中 [style.display] 的奇怪行为 - 两种方式绑定不起作用
【发布时间】：2019-06-25 19:53:13
【问题描述】：

您好，我正在开发一个 Web 应用程序，目标浏览器是 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>

一切似乎都运行良好，元素也显示出来了。

为什么会这样。角度双向绑定是否不适用于 [style.display] 或者我在这里遗漏了什么？请帮助我卡住了。

编辑：

我也试过ngStyle如下

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

这也不起作用。

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

【问题讨论】：

可能不相关，但您可能希望使用 ngIf 从 DOM 中实际删除部分模板，这应该删除一些不应该可见的不必要的模板更新
@Xesenix 我想将元素保留在 dom 中，因为我有对这些元素的 viewchild 引用。
不用[style.display]，你可以简单地使用[hidden]="condition"
@Xesenix 对我来说似乎在 chrome 上工作正常
好吧，这次我成功地对其进行了正确测试，在 IE 上检查 stackblitz.com/edit/… 应该在所有情况下都可以工作，如果我使用 initial 值而不是 block 或只是空显示也可以正确

标签： angular angular5 angular7

【解决方案1】：

试试这个方法，

上课，.d-none { display: none}

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

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

【讨论】：

类方法完全可以正常工作。我已经试过了。为什么 style.display 不起作用是我的困惑。

【解决方案2】：

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

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

【讨论】：