Angular4：*ngIf 不隐藏元素，而是在 Internet Explorer 11 中创建重复元素答案

【问题标题】：Angular4: *ngIf in not hiding element, instead creating duplicate elements in Internet explorer 11Angular4：*ngIf 不隐藏元素，而是在 Internet Explorer 11 中创建重复元素
【发布时间】：2020-08-12 15:57:01
【问题描述】：

我在使用 *ngIf 根据某些标志显示不同类型的图表时遇到问题。它在 chrome 中工作，但在 IE11 中工作。 *ngIf 内容在 flag 为 true 时被添加到 DOM，如果 flag 为 false 则不会被删除。

因此，每次我切换标志时都会创建新图表。

请帮助我。如果我做错了什么。

上下文：我们有两种类型的表单复选框/单选框。一旦用户点击提交按钮。图表将相应呈现复选框 - 条形图 Radiobox - 饼图

使用 *ngIf 切换内容。它在 chrome 中工作。

在 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 cross-browser internet-explorer-11 angular-ng-if ngx-charts

【解决方案1】：

我不知道为什么会这样。但它也发生在我身上，使用相同类型的 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>

让我们明确一点：它应该是完全相同的东西！（只是性能可能更好，因为只有一个“观察者”）

但到目前为止，它对我有用；我不再有那种奇怪的重复了

【讨论】：

即使在使用 switch case 之后，它也会创建重复的元素。