Angular/2：angular2-select從可觀察值填充

我正在使用https://www.npmjs.com/package/angular2-select包。我想與填充爲「tagOptions」的值來填充選擇標籤如下：Angular/2：angular2-select從可觀察值填充

我訂閱可觀察到的，並在認購格式化返回的數據如下：

/** 
* Load all available tags 
*/ 
private getTags() : void { 

    // The observable 
    this.tagService.tags$ 
    .subscribe((tags) => { 

     for (var i = 0; i < tags.length; i++) { 

      this.tagOptions.push({ value: tags[i].id, label: tags[i].name }); 
     } 

     this.variantForm.patchValue({ 
      tags: this.tagOptions 
     });    
    }); 

    let criteria = {columns: ['id','name']}; 
    // Make an ajax request and populate the observable 
    this.tagService.load(this.utilityService.encode(criteria)) 
    .subscribe(); 
}

我的模板全文

<ng-select 
    [options]="tagOptions" 
    placeholder="Select one" 
    multiple="true" 
    allowClear="true" 
    formControlName="tags"> 
</ng-select>

我的模板炸彈了與

「core.umd.js頁面加載：3462 EXCEPTION：未定義的‘選擇’無法設置屬性「

我懷疑我的方法來填充選擇不正確。任何建議表示讚賞。

來源

2016-09-27 prime

這可能是一個異步問題。爲'this.tagOptions'提供虛擬數據會發生什麼？當訂閱返回數據時'ng-select'是否更新？ –

Hi @Federico。我懷疑是異步的。選擇正確填充虛擬數據，這是當我嘗試和補丁炸彈的價值。是否有可能ng-select不支持反應形式？我不會假裝對Angular有足夠的瞭解。 – prime

嗯。這是可能的。當你不做修補程序時會發生什麼？ this.tagOptions綁定到[options]，所以也許它是不必要的。 –

該<ng-select>似乎不反映它已被渲染後的輸入[options]輸入的更改。爲了解決這個問題，您需要在渲染<ng-select>之前準備好數據。角度守衛'resolve'的功能正是如此。如果您使解析函數等待訂閱，那麼在數據可用之前不會呈現頁面。

鏈接到Router resolve guide。

快樂編碼:)

來源

2016-09-27 15:39:32

Angular/2：angular2-select從可觀察值填充

回答

相關問題