将两个值绑定到模型中以供选择框答案

【问题标题】：Bind Two Values Into Model for select box将两个值绑定到模型中以供选择框
【发布时间】：2019-09-16 15:09:16
【问题描述】：

我目前有一个选择框，其中包含从后端获取的用户列表。目前，这个选择框绑定到我的 ng 模型的 name 属性。

但是，用户对象还包含一个电子邮件属性，我想将此属性绑定到模型中的电子邮件属性以及用户从下拉菜单中选择名称时的名称属性。

这个可以吗？

下面是我当前的选择框，可以很好地绑定到我的 ng 模型中的 name 属性：

<select [(ngModel)]="model.name" name ='name'>
    <option value="">--Select a User--</option>
    <option *ngFor="let user of users" [value]="user.name">{{user.name}}</option>
</select>

【问题讨论】：

抱歉，我不认为我理解正确：您想要 2 个不同的选择，一个用于用户，一个用于电子邮件？它们必须连接吗？我的意思是，当您选择 user = "John" 时，第二个选择应自动为 "john@xxx.com"？
@alesssz 基本上我想要一个选择框来更新 ngModel 上的 2 个属性：用户从一个选择框中选择名称时的名称和电子邮件

标签： html angular typescript

【解决方案1】：

通过在我的用户数组中循环选择选项并使用此索引作为值时获取索引来解决此问题。然后我在 select 标签上添加了一个 change 属性，然后使用这个索引从我的 users 数组中获取信息并将其正确设置为模型：

<select class="form-control" [(ngModel)]="selectedUser" name ='name' (change)="userChange()">
    <option value="" selected="true">--Select a User--</option>
    <option *ngFor="let user of users; let i=index" [value]="i">{{user.name}}</option>
</select>

然后在我的组件中：

userChange() {
    this.model.name = this.users[this.selectedUser].name;
    this.model.email = this.users[this.selectedUser].email;
}

【讨论】：

【解决方案2】：

<select [(ngModel)]="model" name ='name'>
    <option value="">--Select a User--</option>
    <option *ngFor="let user of users" [value]="user">{{user.name}}</option>
</select>

如果您选择整个对象，您应该能够选择电子邮件和用户名。

【讨论】：

那么 name 属性是否包含完整的用户对象，这意味着当值更改以将 name 和 email 属性更新为正确值时，我必须触发一个事件？
如果模型类型与用户类型一致，它应该默认更新模型。如果没有，您可以触发一个事件并更新这些值。
谢谢，但是当尝试绑定到一个对象时，模型一直期待一个字符串，因此我得到“[object Object]”返回。我尝试在名为 user 的模型中设置一个属性来保存具有对象类型的用户对象，然后使用任何类型，但它总是作为对象字符串返回