Question

我有一个下拉列表，如果变量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>

如果在模板角度2/5中未定义值

3 个答案: