angular - Angular 8（星云）填充订阅的选择选项

Question

我有一个小<nb-select>的应该从数据库中获取它的值。

在构造函数中，我有：

this.server.getExperimentsUser(this.user.idUser).subscribe((response: any) => {
  console.log(response);
  this.experiments = response.map(x => {
    return {
      name: x.name,
      id: x.idExperiment
    };
  });
  console.log(this.experiments);
}

HTML是：

<nb-select ([ngModel])="currentExperiment" (selectedChange)="changeExperiment($event)" status="primary" placeholder="Select experiment">
  <nb-option *ngFor="let e of experiments" [value]="e.id"> {{ e.name }} </nb-option>
</nb-select>

因此，根据我的（错误的，显然的）逻辑，在进行调用之后，this.experiments会更改并且选项应该填充在<nb-select>. 该调用确实按预期工作，因为console.log()s 返回正确的对象。

我只需要填充一次选择，这就是我将订阅放在构造函数中的原因。我能做些什么？

Answer 1

订阅响应不会发生角度变化检测。这就是即使在您得到正确响应后它也不会反映在 DOM 中的原因。尝试像这样更改代码。

    this.server.getExperimentsUser(this.user.idUser).subscribe((response: any) => {
        console.log(response);
        this.experiments = response.map(x => {
        return {
          name: x.name,
          id: x.idExperiment
        };
      });
      ref.detechChanges();
      console.log(this.experiments);
    }

在你的构造函数中

constructor(private ref: ChangeDetectorRef) {}

你也可以像下面这样更改html

<nb-option *ngFor="let e of experiments" value="e.id"> {{ e.name }} </nb-option>