Angular4 : * ng 요소를 숨기지 않고 Internet Explorer 11에서 중복 요소를 생성하는 중

Question

일부 플래그를 기반으로 여러 유형의 차트를 표시하려면 * ngIf를 사용하여 문제가 발생했습니다. Chrome에서 작동하지만 IE11에서 작동합니다. * 플래그가 true 일 때 DOM에 콘텐츠가 추가되고 flag가 false이면 삭제되지 않습니다.

플래그를 토글 할 때마다 새 차트가 생성됩니다.

도와주세요. 내가 뭔가를하고 있다면.

컨텍스트 : 두 가지 유형의 양식 체크 박스/라디오 박스가 있습니다. 사용자가 을 클릭하면 버튼을 제출하십시오. 막대 그래프 Radiobox - - 파이 차트

내용 * ngIf을 사용하여 전환된다 차트 따라서 체크 박스를 렌더링하는 것이다. 그 크롬에서 일하고.

IE11에서

, 때 * false로 ngIf 플래그 세트. 요소가 제거 및 대체되지 않고 대신 새 차트 및 양식 집합이 만들어집니다.

<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 % 미만), 해당 요소 중 하나가 복제됩니다. 페이지를 떠날 때/돌아올 때, 그것은 다시 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> 

는 이제 명확하게 : 그것은 정확히 같은 일을해야하는데! (단 하나의 "watcher"가 있기 때문에 성능면에서 더 좋을 수도 있습니다)

그러나 지금까지는 저에게 효과적이었습니다. 더 이상 이상한 복제가 없습니다.