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으로 :

<div align="center" *ngIf="stepper"> 
    <ul class="mdl-stepper mdl-stepper--horizontal" id="demo-stepper-nonlinear"> 
     <li class="mdl-step"> 
... 
    </li> 
</ul> 
</div> 

구성 요소 :

export class HomeComponent implements OnInit { 

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

내 각-cli.json에서 6,

:

"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

난 당신이

<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);   
    ... 
}