使用 Rxjs 填充 ng2-select2 指令

Question

我正在使用 Rxjs 来获取我的计费计划。我想在选择输入中设置它们。

目前，我使用ng2-select2 来展示这些计划。

首先，我需要从服务器获取计划：

this.serverService
        .list()
        .subscribe(
            (result: any) => {
                for (let plan of result)
                    this.plans.push({id: plan.id, text: plan.name});
            },
            (error: any) => {

            }
        );

，其中this.plans 是我的 angular2 组件的 Array<Select2OptionData> 字段。

所以，select2 绑定到 this.plans：

<select2 id="default-select"
    (valueChanged)="select2Changed($event)"
    [data]="plans"   <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
    [width]="250"
    [theme]="'bootstrap'">
</select2>

不过，我不太明白何时以及如何初始化 this.plans 字段。

1. 何时：constructor？在 ngOnInit 上，在另一个函数上？
2. 如何：我正在使用 Rx，所以当订阅完成时，select2 指令值应该显示计划。

希望我解释得这么好。

Answer 1

您可以在定义变量时对其进行初始化：

private data: Array<Select2OptionData> = [];

这样您就可以毫无问题地等待服务返回数据。

我注意到，如果 observable 始终发出完整的选项列表，您对服务的订阅可能会导致数据数组中出现重复条目​​。但是，我不知道您的实现是否属于这种情况。