Angular2 ngFür Elemente mit Material Design Lite

Question

Ich bemühe mich, Material Design Lite Komponente mit dynamisch hinzugefügten Elementen über * ngFor arbeiten zu lassen. Ich verstehe, dass ich componentHandler.upgradeElement aufrufen muss, aber wo setze ich diesen Anruf? Ich habe versucht this und this Direktiven, aber sie scheinen nicht zu funktionieren. Insbesondere brauche ich MDL-Menü auf jedem Element meines Arrays. Irgendwelche Vorschläge zu sehen?

Answer 1

TLDR; Sie müssen componentHandler.upgradeElement aufrufen, nachdem die Elemente in das DOM eingefügt wurden. Ein Ansatz, den ich in der Vergangenheit verwendet habe, wird im folgenden Beispiel beschrieben.

EDIT Wenn Sie eine deklarative Lösung this approach here scheinen wie ein ziemlich gutes, aber ich habe es nicht selbst verwendet.

habe ich einen Dienst, der das Material Lite componentHandler

import { Injectable } from '@angular/core'; 

export interface ComponentHandler { 
    upgradeDom(); 

} 

declare var componentHandler: ComponentHandler; 


@Injectable() 
export class MaterialService { 
    handler: ComponentHandler; 
    constructor() { 
     this.handler = componentHandler; 
    } 

    // render on next tick 
    render() { 
     setTimeout(() => { this.handler.upgradeDom(); }, 0); 
    } 

} 

Dann Sie die Render-Funktion des Service rufen wickelt, nachdem die Komponente, die Elemente in das DOM injiziert hat. In Ihrem Fall ist dies nach den *ngFor

Dies ist ein sehr konstruiertes Beispiel ist aber zeigt, „wo“ machen nennen

import { Component, OnInit } from '@angular/core'; 
import { DataService } from 'services/data.service'; 
import { MaterialService } from 'services/material.service'; 

@Component({ 
    selector: 'app-thing', 
    templateUrl: ` 
     <ul> 
      <li *ngFor="let item of data"> 
       {{data}} 
      </li> 
     </ul> 
    ` 
}) 
export class ThingComponent implements OnInit { 
    data: string[] 
    constructor(
     private service: DataService, 
     private material: MaterialService 
    ) { } 

    ngOnInit() { 
     this.service.getData() 
     .subscribe(data => { 
      this.data = data; 
      this.material.render(); 
     }); 
    } 
}