我知道有人问过类似的问题，但我没有找到一个好的答案。我想在 Angular 表单中创建一个选择列表，其中每个选项的值都是一个对象。另外，我不想使用 2 路数据绑定。例如如果我的组件有这些字段：
l 用户：任何[] = [ { 姓名：“比利·威廉姆斯”，性别：“男性”}， {名称：“Sally Ride”，性别：“女性”} ]; curUser：任何；我希望我的 HTML 模板包含以下内容：
【问题讨论】：
标签： angular angular-forms
我目前正在使用[ngValue]，它可以很好地存储对象。
您在使用(change) 而不是(ngModelChange) 时遇到问题的原因可以在this question 中找到
所以，既然您已经使用了[ngValue]，您可能想要做这样的事情，您将只使用一种方式绑定以便能够使用 ngModelChange 指令：
<select (ngModelChange)="setNewUser($event)" (ngModel)="lUsers">
<option *ngFor="let user of lUsers" [ngValue]="user">
{{user.Name}}
</option>
</select>
而且你的 ts 文件会捕获事件并接收 User 对象而不需要通过 id 来跟踪它，基本上重用你的旧方法就足够了：
setNewUser(user: User): void {
console.log(user);
this.curUser = user;
}
2020 年 6 月 16 日更新：
根据您的使用情况，您可能需要在此处使用方括号而不是圆括号：(ngModel)="lUsers。对于 OP 所述的特定情况，圆括号是正确的选择。关于方形/圆形和香蕉盒区别的清晰详细的描述可以在 Angular 大师 Günter Zöchbauer 的这个 answer 中找到
【讨论】：
[ngModel]="lUsers" 才能正常工作
由于option 标记的value 属性不能存储整个对象，我们将在lUsers 数组中创建一个新属性id 来跟踪所选项目。
HTML：
<select #selectElem (change)="setNewUser(selectElem.value)">
<option *ngFor="let user of lUsers" [value]="user.id">
{{user.Name}}
</option>
</select>
这会将唯一的 id 在更改时传递给我们的 setNewUser 函数。
在您的 component.ts 中：
...
lUsers: any[] = [
{ id: 1, Name: 'Billy Williams', Gender: 'male' },
{ id: 2, Name: 'Sally Ride', Gender: 'female'}
];
curUser: any = this.lUsers[0]; // first will be selected by default by browser
...
setNewUser(id: any): void {
console.log(id);
// Match the selected ID with the ID's in array
this.curUser = this.lUsers.filter(value => value.id === parseInt(id));
console.log(this.curUser);
}
这是上述代码的plnkr 演示。打开您的开发者工具以查看控制台日志。
【讨论】：
您可以在 -Elements 上使用 [ngValue] 而不是 [value]。 这个对我有用。
我在这里找到了这些信息：https://www.reddit.com/r/Angular2/comments/65run4/select_option_using_value_vs_ngvalue/
【讨论】：
ANGULAR 6 只需这样做
HTML
<div class="col-3" style="float:left;padding-left: 18px !important;">
<label>Vehicle No.</label>
<div *ngIf="gpsDevicesArray && gpsDevicesArray.length > 0">
<select [ngModel]="selectedVehicle" style="padding: 7px;border-radius: 4px;"
(ngModelChange)="onVehicleNumberChange($event)">
<option *ngFor=" let device of gpsDevicesArray" [ngValue]="device">
{{device.vehicleNumber}}
</option>
</select>
</div>
</div>
类型脚本
// 初始值（将此行放在服务器调用函数中）
this.selectedVehicle = gpsDevicesArray[0];
// 监听器
onVehicleNumberChange(device) {
console.log("selectedVehicle ====", device);
}
【讨论】：
HTML：
<select [formControl]="years">
<option value="">Select</option>
<option *ngFor="let year of yearsList" [ngValue]="year">{{year.value}}</option>
</select>
TS：
years = new FormControl('');
yearsList = [{id: 1, value: '2019'}, {id:2, value: '2020'}];
this.years.valueChanges.subscribe((year) => {
console.log(year)
});
结果： 您将在控制台中获得年份对象:)
【讨论】：
你可以使用 ngModel 和 ngValue
<select [(ngModel)]="curUser ">
<option *ngFor="let user of lUsers" [ngValue]="user">
{{user.Name}}
</option>
</select>
【讨论】：