Question

如果模板中的值未定义 angular 2/5

2018-04-30

565

angular

我有一个下拉菜单，如果变量 user.gender 未定义，我想选择第一个选项。

<select class="form-control" formControlName="gender" [(ngModel)]="user.gender">
  <option [attr.selected]="user.gender == undefined ? true : null ">Select</option>
  <option value="1" >Male</option>
  <option value="0" >Female</option>
</select>

一种不太干净但有效的方法是设置第一个选项 value="undefined" 。有没有更好的方法？

Answer 1

您应该在控制器中设置默认值，或者您可以在视图中执行此操作，例如使用 <option selected>Male</option> 。

Answer 2

首先 - 您应该决定使用模板驱动表单还是反应式表单（如果您已经使用 formControlName="gender" 控制输入，则没有必要使用 NgModel 双向绑定，因为您可以通过该控件更新值）

以模板驱动的方式，您可以这样做：

<select class="form-control" [(ngModel)]="user.gender">
  <option value=undefined>Select</option>
  <option value="1" >Male</option>
  <option value="0" >Female</option>
</select>

组件：

user = { gender: undefined }

Answer 3

在 .ts 中声明 start = null 。
在 ngOnInit 中写入 ngOnInit() {user.gender=start 。
在 .html 文件中

<select class="form-control" formControlName="gender" [(ngModel)]="user.gender">
  <option disabled [value]="start" selected="true">Select</option>
  <option [value]="1" value="1" >Male</option>
  <option [value]="0" >Female</option>
</select>