Skip to main content
se añadieron 256 caracteres en el cuerpo
Origen Enlace

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 };
});

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í

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 };
});
se añadieron 244 caracteres en el cuerpo
Origen Enlace

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í

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.

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í

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í

Origen Enlace

Select con valor vacío al llenarlo por segunda vez

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.

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í