Angular2 ngFor yếu tố có Material Design Lite

Question

Tôi đang cố gắng làm cho thành phần Material Design Lite hoạt động với các yếu tố được thêm động thông qua * ngFor. Tôi hiểu rằng tôi cần phải gọi componentHandler.upgradeElement, nhưng tôi phải thực hiện cuộc gọi này ở đâu? Tôi đã thử các chỉ thị this và this nhưng chúng dường như không hoạt động. Cụ thể, tôi cần menu mdl trên mỗi mục trong mảng của tôi. Bất kỳ đề xuất về nơi để xem xét?

Answer 1

TLDR; Bạn cần gọi componentHandler.upgradeElement sau khi các phần tử đã được đưa vào DOM. Cách tiếp cận mà tôi đã sử dụng trong quá khứ được mô tả trong ví dụ bên dưới.

EDIT Nếu bạn muốn một giải pháp khai báo this approach here có vẻ như là một giải pháp khá hay, nhưng tôi chưa tự sử dụng nó.

Tôi tạo ra một dịch vụ mà kết thúc tốt đẹp 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); 
    } 

} 

Sau đó, bạn gọi làm cho chức năng của dịch vụ sau khi thành phần đã tiêm các yếu tố vào DOM. Trong trường hợp của bạn này là sau khi *ngFor

Đây là một ví dụ rất giả tạo nhưng chứng tỏ "ở đâu" để gọi làm

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