Tengo dos selecciones múltiples prime-ng que dependen una de la otra.

 <div class="input-field-class"> <label class="custom-label">Phase of Development</label> <p-multiSelect defaultLabel="Select Phase" [options]="listPhase" optionLabel="label" [(ngModel)]="selectedPhases" (ngModelChange)="filterProfiles($event)"> </p-multiSelect> </div> <div class="input-field-class"> <label class="custom-label">Related activity</label> <p-multiSelect defaultLabel="Select Activity" [options]="activityList" optionLabel="label" [(ngModel)]="selectedActivities" (ngModelChange)="filterProfiles($event)"> </p-multiSelect> </div>

El código del componente es:

 filterProfile() { let selectedPhasesById = []; let selectedActivitiesById = []; let activitiesByPhases; if (this.selectedPhases.length > 0) { selectedPhasesById = this.selectedPhases.map(c => c.id); activitiesByPhases = this.selectedPhases.map(item => { return this.listActivityByPhases[item.label].map(function(c) { return {label: c.name, value: c.name, id: c.id}; }); }); activitiesByPhases = _.flattenDeep(activitiesByPhases); this.activityList = [...activitiesByPhases]; } else { this.activityList = []; } if (this.selectedActivities.length > 0) { selectedActivitiesById = this.selectedActivities.map(c => c.id); } return {selectedPhasesById, selectedActivitiesById}; }

Cada vez que selecciono dos valores en el menú desplegable Fases, sus valores correspondientes se muestran en el menú desplegable Actividades. El usuario puede seleccionar el valor. Pero, cuando anulo la selección de un valor en el menú desplegable Fases, la etiqueta desplegable Actividades (Seleccionar actividad) no se muestra. Pero hay valores en su menú desplegable. No sé lo que estoy haciendo mal aquí.