Question

我正在使用https://www.npmjs.com/package/angular2-select包。我尝试使用＆＃34; tagOptions＆＃34;的值填充select标记。填充如下：

我订阅了一个observable并在订阅中格式化了返回的数据，如下所示：

/**
 * 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>

我的模板在页面加载时用

炸弹

＆＃34; core.umd.js：3462 EXCEPTION：无法设置属性＆＃39;已选中＆＃39;未定义＆＃34;

我怀疑我填充选择的方法是不正确的。任何建议都表示赞赏。

Answer 1

<ng-select>似乎没有反映其[options]输入后的更改。要解决这个问题，您需要在呈现<ng-select>之前准备好数据。角度路线保护＆＃39; resolve＆＃39;功能正是如此。如果使解析函数等待订阅，则在数据可用之前不会呈现页面。

链接到Router resolve guide。

快乐编码：）

Answer 2

使用ng-select（现在称为angular2-select），您可以传递可观察对象并将| async添加到您的选项中，例如：

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

这似乎更好。

请参见https://ng-select.github.io/ng-select#/data-sources

Angular / 2：angular2-select填充来自observable

2 个答案: