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打破元素样式

回答

相关问题