選択オプションでオブジェクトの配列が表示されない

Question

私は自分のコンポーネントにドロップダウンを持っています。ここではコンポーネントのコードは次のとおりです。

export class MyComponent { 

MyObjectArray: MyObject[] = []; 

constructor(private _service: MyService) 
} 

ngOnInit() { 
    this._service.get().do((response): MyObject[]) => { 
     this.MyObjectArray = response; 

     this.MyObjectArray.forEach((obj) => { 
      console.log(obj.Code) 
     }); 
    }); 

私のHTMLは次のとおりです。

<select> 
    <option [value]="obj.Code" *ngFor="let obj of MyObjectArray; let i = index">{{obj.Code}}</option> 
</select> 

そして、私のサービスで：

return this._http.get(_url, this.options) 
    .map(res => res.json()) 
    .catch(super.handlerError); 

私がサービスすることを確認するために私のコードでconsole.logを持っています何かを返し、私は結果を持っています。問題はなぜ私のドロップダウンにバインドされていないのですか？私は要素を調べて、ドロップダウンに項目がありません。

ああ、一つは、divにを入れてみましたが、spanが入っていました。私はそれが私のドロップダウンに置くとき、それは動作しません理解していないだけです。私は要素を検査する際

EDIT

今、私は私のオブジェクトを見ることができます。しかし、彼らはまだ私のドロップダウンに表示されていません。ここで私は変更するものである：私は手動でも、私のngAfterViewInit()

$('select').material_select(); 

Answer 1

置き換えあなたコード：

this._service.get().subscribe(response => { 
     this.MyObjectArray = response; 
     setTimeout(function(){ 
      $('select').material_select(); 
     },200); 
}); 

コード：$('select').material_select();は値INITの後に選択ボックスを初期化する必要があり、またはあなたがngAfterViewInitにinitをすることができますが、その後、あなたがデータを取得する時間にdestroy and reinitに持っています。

データを正しく取得していますが、データを取得する前に選択ボックスを初期化しているため、既にjQueryで操作した選択済みのcozを更新しないため、更新したデータを表示するために再起動する必要があります。 。

2の選択を破壊する方法

---

：http://materializecss.com/forms.html

$('select').material_select('destroy'); 

---

Answer 2

てみトリガ変化検出にこのコードを持っている

this._service.get().subscribe(response => this.MyObjectArray = response); 

EDIT：

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

constructor(private cdr: ChangeDetectorRef){...} 

this._service.get().subscribe(response => { 
     console.log(JSON.stringify(response)); // what does this print 
     this.MyObjectArray = response; 
     this.cdr.detectChanges(); 
}); 

Answer 3

あなたは非同期データを使用して構築されたドロップダウンを持っています。それでは、$('select').material_select()がselectとitオプションをインスタンス化しています。

問題は、ngAfterViewInit()ライフサイクルフックが実行されるまでに、*ngForの操作がまだ進行中であることです。 select要素を渡して自分自身で調べることができます。これはオプションがリストされていないと思います。

私は同様の問題があり、ディレクティブを作成してそれを解決し、*ngFor要素に参照を追加し、組み込み変数last-を使用して、ディレクティブへの入力として渡します。

last === trueの場合は、ドロップダウンが完了し、$('select').material_select()を使用して指令から指示できます。

setTimeoutを使用することもできます。ネットワークに遅延がなく、ドロップダウンが当然機能しない場合があります。