Angular2 ngIfが要素スタイルを破る

Question

私はangular2アプリにMDLステッパー要素を持っています。私はdiv内にこの要素を持っています。 *ngIfと条件をそのdivに適用すると、ステッパーコンポーネントは完全に壊れてしまいます。 *ngIfがなければ、それは完全にレンダリングする。

<!-- stepper in context --> 
<div align="center"> 
    <ul class="mdl-stepper mdl-stepper--horizontal" id="demo-stepper-nonlinear"> 
     <li class="mdl-step"> 
      <span class="mdl-step__label"> 
       <span class="mdl-step__title"> 
        <span class="mdl-step__title-text">Checkboxes</span> 
        <span class="mdl-step__title-message">Few quick questions</span> 
       </span> 
      </span> 
      <div class="mdl-step__content"> 

      </div> 
      <div class="mdl-step__actions"> 

      </div> 
     </li> 
     </ul> 
     </div> 

なぜですか？ ngIfなし

UPDATE ngIf付：

​​

コンポーネント：

export class HomeComponent implements OnInit { 

    stepper: boolean; 
    constructor(){} 
    showContext(){ 
     this.stepper=true; <= To make the div visible 
     ... 
    } 

私の角度-cli.jsonで

：

"styles": [ 
     "styles.css", 
     "../node_modules/material-design-lite/dist/material.amber-deep_orange.min.css", 
     "../node_modules/mdl-stepper/stepper.css" 
     ], 
     "scripts": [ 
     "../node_modules/material-design-lite/material.min.js", 
     "../node_modules/mdl-stepper/stepper.min.js" 
     ], 

Answer 1

私はあなたがコードは* ngIfと同じように見え、何であるかを示すことができ

<ul #stepper class="mdl-stepper mdl-stepper--hor 

@ViewChild('stepper') stepper:ElementRef; 

constructor(private elRef:ElementRef, private cdRef:ChangeDetectorRef) {} 

showContext(){ 
    this.stepper=true; <= To make the div visible 
    this.cdRef.detectChanges(); 
    componentHandler.upgradeElement(elRef.nativeElement); 
    // or 
    componentHandler.upgradeElement(stepper.nativeElement);   
    ... 
}