Angular/2 : angular2-select populate from observable

Question

我使用https://www.npmjs.com/package/angular2-select包。我试图用"tagOptions"的值填充选择标签，其填充方式如下:

我订阅了一个可观察对象，并在订阅中格式化了返回的数据，如下所示:

/**
 * 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: Cannot set property 'selected' of undefined"

我怀疑我填充select的方法是错误的。

Answer 1

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

链接到路由器resolve指南。

快乐编码:)

Answer 2

使用ng-select (angular2-select现在被称为ng-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/数据源