Angular4：* ngIfは隠し要素ではなく、Internet Explorer 11で重複要素を作成する

Question

いくつかのフラグに基づいて異なる種類のグラフを表示するには、* ngIfを使用して問題に直面しています。 クロムで作業していますがIE11で作業しています。 * ngフラグがtrueの場合、DOMにコンテンツが追加され、flagがfalseの場合は削除されません。

このため、フラグを切り替えるたびに新しいグラフが作成されます。

私を助けてください。もし私が何か苦労しているなら。

コンテキスト： フォームには、2つのタイプのチェックボックス/ラジオボックスがあります。ユーザーがをクリックすると、ボタンが送信されます。棒グラフ ラジオボックス - - 円グラフ

内容は* ngIfを使用してスイッチングされるグラフはそれに応じて チェックボックスをレンダリングします。そのクロムで働く。

In 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％）、それらの要素の1つが複製されます。ページに戻ったり戻ったりするときは、もう一度OKでした。奇妙でランダムなバグのようです。

代わりに、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> 

はのは明確にしましょう：それはまったく同じことになるはずです！ （単なる「ウォッチャー」が1つだけなので、パフォーマンスが向上しているかもしれません）

しかしこれまでのところ、私のために働いています。私はもう奇妙な複製を持っていません