用對象進行選擇的角度雙向綁定

Question

實際上，我正在嘗試將對象數組綁定以選擇輸入。 我正在嘗試以這種方式[[ngModel）] =“ users [i] .roles”，其中'users'是外部數組，'roles'是用戶內部的另一個數組。 在這里，角色是鍵值對的數組，例如，

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

我如何從該數組綁定“代碼”。

我的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

嘗試在<div>元素內使用*ngFor

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

有關更多詳細信息，請參見此處。 如何在Angular 4中使用ngModel綁定數組？

Answer 2

將其放在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 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>