У меня есть список ролей, который имеет идентификатор, имя, parent_id (self one) в JSON.
roles
Я отображаю все роли с их именем и родителем, где parent - это входное значение выбора, которое при загрузке показывает родительское имя, используя выбранную опцию, с идентификатором родителя, совпадающим с идентификатором роли.
<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 также не потребуется, так как обновление выпадающего списка будет динамически обновлять role .
<select [(ngModel)]="role.parent_id">
<option *ngFor="let parent of roles" [ngValue]="parent.id">
{{parent.name}}
</option>
</select>
Я немного изменил HTML-часть. Добавлен множественный в выбор ввода. Модель назначается на основе имени роли 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);
}
}
Дайте время, измените код, как вам нужно. Я создал карту между ролью и их родительскими ролями из исходного списка ролей.
Если вы хотите обновить родительские роли, поступающие с сервера, вам может потребоваться выполнить некоторые дополнительные действия, чтобы заставить работать тот же код.
Надеюсь это поможет.
Напишите функцию (click) в теге option примерно так (click) = SomeFunction (role.id, parent.id)