4

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

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

请帮我。如果我正在做一些扭曲的事情。

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

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

4

1 回答 1

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>

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

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

于 2018-02-06T15:43:02.283 回答