Quiero mostrar un valor desplegable basado en la selección de tipo en otro menú desplegable en angular. Básicamente, tengo una matriz de valores que archivaré según el tipo seleccionado que funciona bien. a continuación se muestra el código de filtrado.

 filterMethod(){ if(type === 'P'){ this.filteredArray = this.relationArray.filter(ele=> this.personValue.includes(ele.name)); } else{ this.filteredArray = this.relationArray.filter(ele=> this.orgValue.includes(ele.name)); } }

Y en HTML lo estoy haciendo un bucle.

 <mat-select formControlName="relation" aria-owns="relationshipSelect"> <mat-option *ngFor="let rel of filteredArray" [value]="relation.name"> {{rel.value}} ............

Este HTML anterior es básicamente un componente secundario donde el usuario puede desplegar varios menús cuando hace clic en el botón nuevo. es decir, otro menú desplegable vendrá al lado y así sucesivamente...

Aquí, lo que sucede es que después de seleccionar el menú desplegable de relation cuando el usuario hace clic en el botón nuevo, aparece otro menú desplegable de relation , pero el valor del menú desplegable de relation existente desaparece. Si el usuario activa el método filterMethod() , aparecerá el valor desaparecido.

Sospecho que se debe a que al llamar al nuevo botón se creará una nueva instancia y la matriz se establecerá en su estado original.