Question

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

但是，用户对象还具有email属性，当用户从下拉菜单中选择名称时，我想将此属性绑定到模型中的email属性以及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>

Answer 1

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

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

Answer 2

通过遍历我的用户数组中的选择选项来获取索引并将此索引用作值来解决此问题。然后，我在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 个答案: