У меня есть список ролей, в котором есть id, name, parent_id (self one) в JSON.
roles
Я показываю все роли с их именем и родителем, где родительский элемент - это вход выбора, который при загрузке показывает имя родителя с использованием выбранной опции с родительским идентификатором, соответствующим идентификатору роли.
<ng-container *ngFor="let role of roles">
<tr>
<td>{{role.name}}</td>
<td>
<select (change)="changeParent($event)">
<option></option>
<ng-container *ngFor="let parent of roles">
<option [selected]="role.parent==parent.id"
[ngValue]="roles" [value]="parent.id">
{{parent.name}}
</option>
</ng-container>
</select>
</td>
</tr>
</ng-container>
При изменении параметра я хочу получить доступ к ngValue и значению параметра, выбранному в файле TS, чтобы обновить родительский элемент роли в вызове API, поскольку я получаю идентификатор роли и родительский идентификатор, с которым я может запихнуть патч.
3 ответа
Самый простой способ сделать это - использовать ngModel в раскрывающемся списке select для привязки parent_id. Таким образом, вам даже не нужно будет указывать атрибут selected, поскольку ngModel уже привязан к parent_id и changeParent также не потребуется, поскольку обновление раскрывающегося списка будет динамически обновляться roles.
<select [(ngModel)]="role.parent_id">
<option *ngFor="let parent of roles" [ngValue]="parent.id">
{{parent.name}}
</option>
</select>
Напишите функцию (щелчок) в теге option примерно так (click) = SomeFunction (role.id, parent.id)
Я немного изменил HTML-часть. Добавлен multiple в выбранный ввод. Модель назначается на основе имени роли selectedRoles[role.name], поэтому всякий раз, когда вы выбираете несколько ролей в качестве родительских, она вызывает функцию changeParent($event), и на консоли вы сможете увидеть, какая роль содержит каких родителей.
app.components.html:
<ng-container *ngFor="let role of roles">
<tr>
<td>{{role.name}}</td>
<td>
<select multiple [(ngModel)]="selectedRoles[role.name]" (ngModelChange)="changeParent($event)">
<ng-container>
<option *ngFor="let role of roles" [selected]="selectedRoles[role.name].indexOf(role.id)" [value]="role.id">
{{role.name}}
</option>
</ng-container>
</select>
</td>
</tr>
</ng-container>
app.components.ts:
export class AppComponent implements OnInit {
// assuming roles is the list you have stated
// in the problem description
roles = [
{
id: 1,
name: 'Admin',
parent_id: 1
},
{
id: 2,
name: 'User',
parent_id: 2
},
{
id: 3,
name: 'Guest',
parent_id: 3
}
];
// selectedRoles will be the model for the select
// input in form
selectedRoles = {};
ngOnInit(): void {
// calling the initRolesModel function
this.initRolesModel();
}
initRolesModel() {
// mapping the parent roles with role name
this.roles.forEach((role: any) => {
this.selectedRoles[role.name] = [role.parent_id];
});
}
changeParent($event) {
console.log(this.selectedRoles);
}
}
Дайте немного времени, измените код по мере необходимости. Я создал карту между ролью и выбранными родительскими ролями из исходного списка ролей.
Если вы хотите обновить родительские роли, поступающие с сервера, вам, возможно, придется проделать некоторые дополнительные работы, чтобы тот же код заработал.