0

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:

introducir la descripción de la imagen aquí

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:

introducir la descripción de la imagen aquí

Así es como lo estoy llenando

this.infoFlujoService.infoFlujo.subcategorias = subcategoriasParse.listCatalogCatSub.map( (subcategoria : any) => {
    return { idx : subcategoria.subCategoryID, desc : subcategoria.descSubCategory };
});
4
  • Y como es tu metodo getSubcategoria(categorias.value) exactamente el 6 ago. 2020 a las 18:35
  • Ya modifiqué la información, el método getSubcategoria(), va a un servicio y regresa la información y esa información es la que le hago el .map() el 6 ago. 2020 a las 18:51
  • Intenta esto <option selected disabled value="seleciona una subcategoria">SELECCIONE UNA SUBCATEGORÍA</option> o puedes probar con placeholder="seleciona una subcategoria" el 6 ago. 2020 a las 20:07
  • Lo intenté pero de principio sin cargar nada ya me aparece en blanco el Select :( el 6 ago. 2020 a las 22:08

1 respuesta 1

0

El motivo más probable por el que se queda en blanco el campo subcategoría es que tenga asignado un valor que no existe en las option del select.

Así que para solucionar esto, dentro del método llamado getSubcategoria que se ejecuta al cambiar la categoría principal se necesita limpiar los valores que pudiera tener el campo subcategoría, una forma de conseguir esto es:

this.aquiNombreDelFormulario.get('subcategoria').reset('');

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.