Angular4: *ngIf не скрывает элемент, вместо этого создает повторяющиеся элементы в Internet Explorer 11

Я столкнулся с проблемой, используя *ngIf для отображения различных типов диаграмм на основе некоторого флага. Он работает в хроме, но в IE11. *ngЕсли содержимое добавляется в DOM, когда флаг равен true, а не удаляется, если флаг равен false.

Из-за этого каждый раз, когда я переключаю флаг, создается новая диаграмма.

пожалуйста, помогите мне. если я делаю что-то отжимать.

Контекст: у нас есть два типа флажков/переключателей форм. После того, как пользователь нажмет кнопку отправить. Диаграммы будут отображаться соответствующим образом Флажок — столбчатая диаграмма Радиобокс — круговая диаграмма

содержимое переключается с помощью *ngIf. он работает в хроме.

В IE11, *когда для флага ngIf установлено значение false. элемент не удаляется и не заменяется, вместо этого создается новый набор диаграмм и форм.

<ht-check-form 
  *ngIf="!chartDisplay"
  [surveyDetails]="survey"
  (onFormSubmit)="submitSuvery($event)"
></ht-check-form>

<ht-chart
  *ngIf="chartDisplay"
  [surveyDetails]="survey"
  [chartResult] = "chartData"
></ht-chart>

Пример кода находится в plunker: https://plnkr.co/edit/bANp2nJzyVMTFpK9F8NE?p=preview< /а>


angular internet-explorer-11 cross-browser angular-ng-if ngx-charts
person Vishwas HK    schedule 07.12.2017    source источник
comment
Помощь здесь приветствуется.   -  person Vishwas HK    schedule 18.01.2018
comment
Я сталкиваюсь с той же проблемой.   -  person VSO    schedule 02.04.2018

Ответы (1)


arrow_upward
1
arrow_downward

Я не знаю, почему это происходит. Но это случилось и со мной, с такой же HTML-разметкой: элемент с *ngIf="condition", за которым следует другой элемент с *ngIf="!condition".

Иногда (~ 1% случаев) один из этих элементов дублировался. При выходе/возвращении на страницу снова все было в порядке. Похоже на странную, случайную ошибку.

Вместо этого я использовал ngSwitch.

В вашем случае это будет выглядеть так:

<ng-container [ngSwitch]="chartDisplay == null">
    <ht-check-form 
      *ngSwitchCase="true"
      [surveyDetails]="survey"
      (onFormSubmit)="submitSuvery($event)"
    ></ht-check-form>
    <ht-chart
      *ngSwitchCase="false"
      [surveyDetails]="survey"
      [chartResult] = "chartData"
    ></ht-chart>
</ng-container>

давайте проясним: это должно быть точно то же самое! (может быть, лучше по производительности, потому что есть только один наблюдатель)

но до сих пор это работало для меня; У меня больше нет этого странного дублирования

person Colin Valière    schedule 06.02.2018
comment
даже после использования переключателя он создает повторяющиеся элементы. - person Suhail AKhtar; 21.11.2018