Tengo estos 2 Select en un componente.html hijo.
Desde el componente.ts del padre lleno la información de los Select que están en un service del hijo.
//En un service.ts tengo definido esto:
infoFlujo : InfoFlujos = {
categorias : [],
subcategorias: [],
.
.
};
export interface InfoFlujos {
categorias : Select[];
subcategorias: Select[];
.
.
}
export interface Select {
idx : string,
desc: string
}
//En el componente.ts Padre
//Está el método getSubcategoria() voy a un servicio por la información y a esa información la mapeo para poder agregarla a mi Select de esta manera.
getSubcategoria( idCat : string){
.
.//Mando llamar a mi servicio y me regresa las subcategorías en subcategoriasResp.jsonResponse
.
const subcategoriasParse : any = JSON.parse(subcategoriasResp.jsonResponse);
this.infoFlujoService.infoFlujo.subcategorias = subcategoriasParse.listCatalogCatSub.map( (subcategoria : any) => {
return { idx : subcategoria.subCategoryID, desc : subcategoria.descSubCategory };
});
}
<!-- Componente html hijo -->
<select class="form-control" id="categoria" formControlName="categoria" (change)="getSubcategoria(categorias.value)" #categorias>
<option selected disabled value="">SELECCIONE UNA CATEGORÍA</option>
<option *ngFor="let categoria of infoFlujoService.infoFlujo.categorias" [value]="categoria.idx">
{{categoria.desc}}
</option>
</select>
<select class="form-control" id="subcategoria" formControlName="subcategoria" #subcategorias>
<option selected disabled value="">SELECCIONE UNA SUBCATEGORÍA</option>
<option *ngFor="let subcategoria of infoFlujoService.infoFlujo.subcategorias" [value]="subcategoria.idx">
{{subcategoria.desc}}
</option>
</select>
Las categorías se llenan con el onInit(), y la primera vez que selecciono una categoría se llena correctamente la subcategoría:
Pero si al seleccionar una subcategoría, después cambio la categoría al llenar nuevamente las subcategorías deja en blanco el Select con la información normal:
Así es como lo estoy llenando
this.infoFlujoService.infoFlujo.subcategorias = subcategoriasParse.listCatalogCatSub.map( (subcategoria : any) => {
return { idx : subcategoria.subCategoryID, desc : subcategoria.descSubCategory };
});