Angular2 ngIf打破元素樣式

我在我的angular2應用程序中有一個MDL步進元素。我在div中有這個元素。如果我將*ngIf和條件應用於該div，則步進器組件完全損壞。沒有*ngIf它呈現完美。Angular2 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

隨着ngIf

UPDATE：

組件：

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" 
     ],

來源

2017-02-21 Nitish

可以顯示的代碼是什麼樣子與* ngIf，什麼是條件？ –

你可以添加你的CSS/LESS或SASS代碼嗎？ –

您可能需要在'* ngIf'表達式變得真實並且將元素添加到DOM之後再次運行'upgradeDom（）'。 http://stackoverflow.com/questions/34421919/integrating-material-design-lite-with-angular2 –

我認爲你需要像

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

來源

2017-02-21 11:17:45

好吧，我只是試過這個，但它沒有做任何事情。我需要比nativeElement更多的東西嗎？ – Nitish

我更新了我的答案。也許你需要將'upgradeElement（）'應用到確切的元素。我不知道MDL。您也可以嘗試'upgradeDom（）'，如我在評論中鏈接到的其他答案中所述。 –

是的，這工作！再次感謝:) – Nitish

Angular2 ngIf打破元素樣式

回答

相關問題