Angular select 与对象的双向绑定

Question

实际上，我正在尝试将对象数组绑定到 select 输入。我正在尝试这种方式，[(ngModel)]="users[i].roles"，其中 'users' 是外部数组，'roles' 是用户内部的另一个数组。在这里，角色是键值对的数组，例如，

roles = [{'code': 1, 'desc: ''},{'code': 2, 'desc: ''},{'code': 3, 'desc: ''}]

如何从这个数组中绑定 'code'。

我的HTML代码，

 <mat-select placeholder="User Roles" [(ngModel)]="users[i].roles" matTooltip="{{users[i].roles}}" multiple>
    <mat-option *ngFor="let role of userRoles" [value]="role.code">{{role.desc}}</mat-option>
 </mat-select>

Answer 1

把它放在一个 ngFor 中：

在 .ts 中：

roles= [{'code': 1, 'desc: ''},{'code': 2, 'desc: ''},{'code': 3, 'desc: ''}]

在.html

<div *ngFor="let role of roles;let index=index">
    <input [(ngModel)]="roles[index].code">
</div>

Answer 2

尝试在 <div> 元素中使用 *ngFor

<div *ngFor="let role of roles">
    <input type="number" [(ngModel)]="role.code">
</div>

更多详情请看这里..

Answer 3

感谢您的帮助。我通过这种方式修改代码解决了这个问题...

for (let user of this.users) {
   user.userRoles = [];
   for(let role of user.roles)
   {
     user.userRoles.push(role.code);
   }
}

在html,

<mat-select placeholder="User Roles" [(ngModel)]="users[i].userRoles" matTooltip="{{users[i].userRoles}}" multiple>
    <mat-option *ngFor="let role of userRoles" [value]="role.code">{{role.desc}}</mat-option>
</mat-select>

Angular select 与对象的双向绑定

Angular two-way binding for select with object

checkbox

binding

select

two-way

angular