将选择值与 Angular 4 中的 ngModel 相关联答案

【问题标题】：Associate select value to ngModel in Angular 4将选择值与 Angular 4 中的 ngModel 相关联
【发布时间】：2019-01-21 05:00:01
【问题描述】：

我正在使用 Angular4 将 ngValue 关联到 ngModel 但得到Null。所以请帮助我将ngValue 连接到ngModel

<select name="gender" [(ngModel)]="nameForm.gender">
  <option [ngValue]="Male">Male</option>
  <option [ngValue]="Female">Female</option>
  <option [ngValue]="Others">Others</option>
</select>

【问题讨论】：

标签： javascript angular forms select

【解决方案1】：

环绕单引号'Male'

<select name="gender" [(ngModel)]="nameForm.gender">
    <option [ngValue]="'Male'">Male</option>
    <option [ngValue]="'Female'">Female</option>
    <option [ngValue]="'Others'">Others</option>
 </select>

【讨论】：

【解决方案2】：

除了其他答案 - 我将通过 *ngFor: 填充选项：

<option *ngFor="let item of genders" [ngValue]="item">{{ item }}</option>

在组件的类中简单地创建性别属性，如下所示：

genders: string[] = ['Male', 'Female', 'Others'];

如果你想使用不同的key-value，你可以创建对象数组：

[{value: 'male', title: 'Male'}, {value: 'female', title: 'Female'}, ...]

在你的模板中：

<option *ngFor="let item of genders" [ngValue]="item.value">{{ item.title }}</option>

最后一种情况——如果你想在你的模板中有选项，你可以简化绑定语法：

<option ngValue="Male">Male</option>
...

【讨论】：

【解决方案3】：

直接绑定value attr：

<option [value]="'Male'">Male</option>

...注意[value] 中的单引号。

【讨论】：

【解决方案4】：

使用[value]

<select [(ngModel)]="nameForm.gender">
    <option [value]="'Male'">Male</option>
    <option [value]="'Female'">Female</option>
    <option [value]="'Others'">Others</option>
</select>

【讨论】：