Angular: странное поведение [style.display] в IE 11 - двусторонняя привязка не работает

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>

Кажется, все работает нормально, и элемент отображается.

Почему это происходит. Двухстороннее угловое связывание не работает с [style.display] или я что-то здесь упускаю? Пожалуйста, помогите, я застрял.

EDIT:

Я также попробовал ngStyle следующим образом

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

Это тоже не сработало.

Я пробовал с подходом на основе классов, который работает нормально. Но мой вопрос здесь, почему [style.display] не работает!?

Answer 1

Оказывается, начальное свойство не поддерживается в IE. Изменение его для блокировки исправило проблему.

Ссылка: https://developer.mozilla.org/en-US/docs/Web/CSS/initial

Answer 2

Попробуйте с этим подходом,

Есть класс, .d-none { display: none}

Добавьте свой стиль в следующем формате,

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