Material Design Liteコンポーネントを* ngForを介して動的に追加された要素と連携させるために苦労しています。私はcomponentHandler.upgradeElementを呼び出す必要があることを理解していますが、この呼び出しをどこに置くのですか?私はthisとthisディレクティブを試していましたが、うまくいかないようです。 具体的には、私の配列の各項目にmdl-menuが必要です。どこを見るかに関する提案はありますか?Angular2 ng For Material Design Liteを持つ要素
6
A
答えて
1
TLDR;要素がDOMに注入された後で、componentHandler.upgradeElementを呼び出す必要があります。私が過去に使ったアプローチは、以下の例で説明されています。
EDIT宣言的ソリューションthis approach hereをかなり良いものに見せたいが、私はそれを自分で使っていない。
私はマテリアルライト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);
}
}
をラップサービスを作成した後、あなたは、コンポーネントのDOMに要素を注入した後のサービスの機能をレンダリング呼び出します。あなたのケースでは、これはこれは非常に不自然な例ですが、「どこで」レンダリング呼び出すことが実証*ngFor
後で
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();
});
}
}
関連する問題
- 1. Material Design Liteメニューダイナミックリピート
- 2. Material Design Lite Carousel
- 3. Material Design Liteフォントの問題
- 4. Material Design Lite 2.0へのアップグレード
- 5. Material Design Lite Lists - 選択した要素にアクセスする方法?
- 6. Material Design Liteロードされたすべての要素JSコールバック
- 7. Material Design LiteとAngular Material Designの違いは何ですか?
- 8. Material Design LiteタブがAngular2で動作しない
- 9. Angular2ルータとMaterial Design Liteとのやりとり
- 10. Material Design Lite - Navヘッダーの検索バー
- 11. Material Design Liteプログラムによるフローティングラベルのトリガー
- 12. Material Design Lite Googleサポートウェブページに似たレイアウト
- 13. HTMLとMaterial Design Liteのmdlとdiv要素の違いは何ですか?
- 14. リソースのロードに失敗しました(404エラー)(Material Design Lite)
- 15. Material Design Liteスイッチがjquery loadで動作しない
- 16. Material Design Liteのフォームボタンは何も送信しません
- 17. Design Material Design Lite Google Keepのように見えるカード付きグリッド
- 18. Material Design Liteのチェックボックスはリストにはありません
- 19. エラーメッセージの確認と表示方法 - Angular2 Material Design?
- 20. Material Design Lite - Firefox上でのテキストエリアの不揃い
- 21. scssのMaterial Design Liteのテーマカラーを変更する
- 22. Material Design Liteでカスタムカラーを使用するには?
- 23. Material Design Liteでタブバーを中央に配置する方法
- 24. タブ内のタブを使用していない - Material Design Lite
- 25. Material Design Liteカードを右手に整列する方法
- 26. Material Design Liteのツールチップの問題2角型
- 27. Material Design Liteのアニメーションデモはどこですか?
- 28. Material Design Lite - プログラムで開いて閉じるToast
- 29. 開いた要素を持つAngular2テンプレート
- 30. このカスタム要素は機能しますか?私はそれをやめましたMaterial Design lite