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

使用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
        ...
    }

在我的angular-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

我认为你需要像

这样的东西

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