Angular/2 : angular2-select 从 observable 填充答案

【问题标题】：Angular/2 : angular2-select populate from observableAngular/2 : angular2-select 从 observable 填充
【发布时间】：2016-09-27 14:33:16
【问题描述】：

我正在使用https://www.npmjs.com/package/angular2-select 包。我正在尝试使用“tagOptions”的值填充选择标记，该值填充如下：

我正在订阅一个 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>

我的模板在页面加载时爆炸了

“core.umd.js:3462 例外：无法设置未定义的属性“选定””

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

【问题讨论】：

这可能是一个异步问题。当您为this.tagOptions 提供虚拟数据时会发生什么？订阅返回数据时ng-select会更新吗？
嗨@Federico。我也怀疑异步。选择正确地填充了虚拟数据，这是当我尝试修补它轰炸的值时。 ng-select 是否可能不支持反应形式？我不会假装对 Angular 的了解足够了解。
嗯。这是可能的。当您不执行patchvalue 时会发生什么？ this.tagOptions 绑定到 [options] 所以也许它是不必要的。
删除了补丁声明，没有任何反应，选项永远不会更新。开始认为这是解决方案的局限性。
是的。您可以做的是在页面加载时使用resolve 路由器保护让您的模板可以使用数据。它会阻止您的页面在您的订阅返回数据之前加载。（这样你就不会被无用的虚拟数据困住）。阅读更多关于它的信息here

标签： angular

【解决方案1】：

<ng-select> 在渲染后似乎没有反映对其[options] 输入的更改。为了解决这个问题，您需要在呈现<ng-select> 之前准备好数据。角度路由保护 'resolve' 功能正是这样做的。如果您让解析函数等待订阅，则在数据可用之前不会呈现页面。

链接到Router resolve guide。

编码愉快:)

【讨论】：

【解决方案2】：

使用 ng-select（现在称为 angular2-select），您可以传递一个 observable 并将 | 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

【讨论】：