選擇選項不顯示對象陣列

我在組件中有一個下拉列表。下面是組件的代碼：選擇選項不顯示對象陣列

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在我的代碼，以驗證服務返回了一些東西，我得到了結果。問題是爲什麼它沒有綁定在我的下拉列表中。我確實檢查了元素，下拉列表中沒有項目。

哦，有一件事，我試圖把ngFor在div與span裏面，它正在工作。我只是不明白，當我把它放在我的下拉，它不起作用。

編輯

現在，當我檢查元素，我可以看到我的對象。但他們仍然沒有出現在我的下拉列表中。這是我改變了：

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

編輯

我也有我的ngAfterViewInit()

$('select').material_select();

來源

2017-04-18 Gerald Gonzales

更換你代碼與此：

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

代碼：$('select').material_select();應該值初始化後，初始化的選擇框，或者您也可以ngAfterViewInit初始化但你必須destroy and reinit你獲取數據的時間。

您正在獲取數據，但問題是您在獲取數據之前正在初始化選擇框，因此它不會自動更新您已使用jQuery操作過的選擇區域，您必須重新啓動以顯示更新的數據。

如何銷燬選擇2：http://materializecss.com/forms.html

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

來源

2017-04-18 06:46:08

如果異步操作由於某種原因需要更長的時間200毫秒，比如網絡中的意外延遲，那麼這是行不通的。在某些情況下它可能是可以接受的，但是如果應用程序依賴於此下拉菜單正常運行，則需要更強大的實現。 – unitario

男士，請閱讀我的第二段，您可以初始化viewInit，然後在獲取數據時重新開始。 @unitario，希望你得到你的答案 –

我可以知道如何「銷燬並重新啓動」我的選擇？ –

嘗試觸發手動更改檢測驗證碼：

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

來源

2017-04-18 05:39:57 echonax

謝謝你，但它仍然沒有出現在UI中。 –

@GeraldGonzales你可以把一個'console.log'像我在我的答案一樣，並將日誌添加到您的問題嗎？ – echonax

它記錄了數組對象。 –

你這是使用異步數據所作出的下拉菜單。然後你有$('select').material_select()實例化選擇和它的選項。

問題是，在執行生命週期掛鉤ngAfterViewInit()時，*ngFor操作仍在進行中。您可以傳遞select元素並自己檢查它，我猜測它沒有列出任何選項。

我也有類似的問題，我通過創建一個指令解決它，添加一個引用它的*ngFor的元素，則利用內置的可變last - let last = last，並傳遞作爲輸入指令。

如果last === true那麼您的下拉列表已完成，您可以使用$('select').material_select()從指令中安裝它。

您也可以使用setTimeout，希望網絡沒有延遲，這種情況下，下拉菜單當然不起作用。

來源

2017-04-18 07:00:00 unitario

選擇選項不顯示對象陣列

回答

相關問題