Angular2 ngFor Tasarım Lite

Question

ile uyumlu elemanlar

Materyal Tasarımı Lite bileşenini dinamik olarak eklenmiş öğelerle * ngFor aracılığıyla çalışmak için uğraşıyorum. ComponentHandler.upgradeElement öğesini çağırmam gerektiğini anlıyorum, ancak bu aramayı nereye koyacağım? this ve this yönergelerini deniyordum ama işe yaramıyorlar. Özellikle, dizimin her bir öğesinde mdl-menüsüne ihtiyacım var. Nereye bakacağınız konusunda herhangi bir öneriniz var mı?

Answer 1

TLDR; Öğeler DOM'a enjekte edildikten sonra componentHandler.upgradeElement öğesini çağırmanız gerekir. Geçmişte kullandığım bir yaklaşım, aşağıdaki örnekte açıklanmıştır.

EDIT Beyanatlı bir çözüm istiyorsanız, this approach here oldukça iyi görünüyor, ama ben kendim kullanmadım.

ben bileşen DOM içine unsurları enjekte edildikten sonra Sonra hizmetin hale işlevi çağırmak Malzeme 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); 
    } 

} 

sarar bir hizmeti yarattı. Senin durumunda bu Bu çok yapmacık bir örnek ama "burada" işlemek çağırmak gösteren *ngFor

sonradır

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