Угловая двусторонняя привязка для выбора с объектом

Question

На самом деле, я пытаюсь связать массив объектов для выбора ввода. Я пытаюсь таким образом, [(ngModel)] = "users [i] .roles", где 'users' - внешний массив, а 'role' - другой массив внутри пользователей. Здесь role - это массив пар ключ-значение, например,

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

попробуйте использовать *ngFor внутри <div> элемента

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

, подробнее см. Здесь .. Как правильно связать массив с ngModel в угловых 4?

Answer 2

спасибо за вашу помощь.Я решил эту проблему, изменив код таким образом ...

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>

Answer 3

поместите его в 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>