在更改之前，下拉ngModel未定义

Question

使用Angular 5，我创建了一个下拉列表，其中包含使用Firebase数据填充的选项。即使填充了选项，我的ngModel也是未定义的，除非我更改选项。我可以做些什么来使用默认选项而不首先更改为另一个？

这是HTML：

<select name="reviewer" [(ngModel)]="reviewer">
  <option *ngFor="let editor of editors" [ngValue]="editor.$value">{{editor.$value}}</option>
</select>

这是TS：

export class CreateComponent implements OnInit {

  reviewer;

  constructor(...) {

    alert(this.reviewer); //undefined unless changed to another option

  }

}

Answer 1

在角度生命周期中，首先执行构造函数。它在视图初始化之前执行。在您的代码中，您在构造函数中使用了this.reviewer，那时您的变量尚未初始化。所以它给出了一个未定义的值。但是，一旦更改了下拉值，由于[（ngModel）]数据绑定，将为审阅者变量分配一个新值。

如果在声明变量时或在警报之前为审阅者变量分配了默认值，则不会给出未定义的值。

例如 ：

export class CreateComponent implements OnInit {

  reviewer;

  constructor(...) {
   this.reviewer=editors[0] //you can assign a default value here
    alert(this.reviewer); //undefined unless changed to another option

  }

}

从这里了解角度生命周期

https://angular.io/guide/lifecycle-hooks