Angular4 : *ngIf in not hiding element, 而不是在 Internet Explorer 11 中创建重复元素

Question

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

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

请帮帮我。如果我正在做某事。

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

使用 *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

Answer 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>

让我们明确一点:它应该是完全一样的东西! (只是性能可能更好，因为只有一个“观察者”)

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