How to Maintain Selections in Nested Angular Multi-Select Components

<div *ngFor="let field of selectFields; let i = index">
<div class="role-list">
<div class="role-list-box">
<span for="select-{{ i }}">{{ i + 1 }}:</span>
<select multiple [(ngModel)]="EsclatedRoles" class="form-control"
name="optionvalue" #optionvalue="ngModel" (change)="onSelectionChange(i)">
<option *ngFor="let f of roles" [value]="f.entityId">
{{ f.name }}
</option>
</select>
</div>
</div>
<div class="role-container">
<div *ngFor="let selectedRole of EsclatedRoles; let j = index" class="selected-role-box">
<p-multiSelect
[placeholder]="'Department'"
[options]="allFields"
optionLabel="name"
name="multi"
optionValue="id"
[(ngModel)]="userRoles[selectedRole].Department"
></p-multiSelect>
<p-multiSelect
[placeholder]="'Division'"
[options]="allFields"
optionLabel="name"
optionValue="id"
name="multisec"
[(ngModel)]="userRoles[selectedRole].Division"
></p-multiSelect>
</div>
</div>
</div>



//I have already initialized my object array as per the count userRoles = new Array(this.count).fill(null).map(() => ({}));

onSelectionChange(index: number) {
const selectedRoles = this.task.config.EsclatedRoles[index];
let savedRole = JSON.parse(JSON.stringify(this.task.config.userRoles[index])); // saving the roles to reassign
userRoles[index] = {};

if (selectedRoles) {
selectedRoles.forEach(role => {
if (!savedRole[role]) {
userRoles[index][role] = { Department: [], Division: [] };
} else {
userRoles[index][role] = savedRole[role];
}
});
}
}


I have two nested ngFor loops, and for each selection of EscalaedRoles(2d array) (which is a multiselect field) I am generating an object with selected Role as key, and inside my object I have two MultiselectFields (department and divison), when I select some options in either department and divison, and select a new EscalatedRole, the selected options inside both p-multiselect vanishes, although they are still present in the object, hence the 2 way binding is correct otherwise the data will not be there, I tried everything from change detection to changing the data structures of userRoles, still I am getting the same error. help me out in this, and I wanna know eher I am making mistake, or if anyone have better alternative

Continue reading...