0

Estimados necesitó filtrar, selects dependientes en Angular 9, tengo este código me devuelve una descripción (description) y un código (code) nesecito enviar el código al otro select, para obtener la description o nombre de provincia, el tema es que es un solo endpoint.
No se como pasar el código al otro select,

Me envían un enpoint único que por el code obtengo el otro valor es hacer un select en cascada,

Dejo lo que tengo. espero me puedan ayudar no se si me explique bien pero es lo que tengo.

en el método onSelect() en consola obtengo el código correcto, pero no se como enviárselo al otro select para que obtenga el nombre correspondiente espero este explicando bien.

/* Servicio Inicio*/
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { environment } from 'src/environments/environment.dev';
import { IUbigeo } from '@aafp/commons/interfaces';
import { Department, Province } from '../interfaces/ubigeo.interface';

@Injectable({
  providedIn: 'root'
})
export class Ubigeo {

  public departamentos: Department[] = [];
  public provincias: Province[] = [];
  // ENDPOINTS
  private url = `${environment.url}/retiro4uit/v1/util4uit/util?code=ubigeo`;
  
  constructor(private http: HttpClient) { }
  
  getDepartamentos () {
    this.http.get(this.url)
      .subscribe( (resp: Department[]) => {
        console.log(resp, 'departamentos');
        this.departamentos = resp;
      });
  }
}
/* Servicio Fin*/

/* Componente Inicio*/
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper';
import { Ubigeo } from '../../commons/http/ubigeo.http';
import { SELECT_ITEM_HEIGHT_EM } from '@angular/material/select';
import { Department, Province } from '../../commons/interfaces/ubigeo.interface';

@Component({
  selector: 'app-residente-aporte-step',
  templateUrl: './residente-aporte-step.component.html',
  styleUrls: ['./residente-aporte-step.component.scss'],
  providers: [
    {
      provide: STEPPER_GLOBAL_OPTIONS,
      useValue: { displayDefaultIndicatorType: false },
    },
  ],
})
export class ResidenteAporteStepComponent implements OnInit {

  firstFormGroup: FormGroup;
  secondFormGroup: FormGroup;
  public formSubmitted = false;

  constructor(
    private _formBuilder: FormBuilder,
    public ubigeo: Ubigeo,
    ) {}
  
  ngOnInit(): void {
    this.ubigeo.getDepartamentos();
  }

  // Cargando Datos del servicio 4uit localstorage
  firstName =  localStorage.getItem('firstName' || '').toLowerCase();
  amountAvailable =  localStorage.getItem('amountAvailable' || '');

  // carga Provincias
  onSelect(code: number): void {
    console.log(code);
  } 
}
/* Componente Fin*/
<mat-form-field class="select-width">
    <mat-label>Departamento</mat-label>
    <select matNativeControl required [(ngModel)]="selectedDepartament.code" (change)="onSelect($event.target.value)">
        <option *ngFor="let departments of ubigeo.departamentos" value={{departments.code}}>{{departments.description | titlecase}}</option>
    </select>
</mat-form-field>

<mat-form-field class="select-width">
    <mat-label>Provincia</mat-label>
    <select matNativeControl required>
        <option value="Lima">Lima</option>
        <option value="Lima">Lima</option>
        <option value="Lima">Lima</option>
        <option value="Lima">Lima</option>
    </select>
</mat-form-field>

introducir la descripción de la imagen aquí

1 respuesta 1

0

Primero a tu servicio agrega el siguiente método getProvincias(code) para obtener las provincias del departamento (lee los comentarios dentro del código):

export class Ubigeo {

  public departamentos: Department[] = [];
  public provincias: Province[] = [];
  // ENDPOINTS
  // retiramos el ubigeo y lo colocamos en getDepartamentos(), el parámetro code lo usaremos para obtener las provincias.
  private url = `${environment.url}/retiro4uit/v1/util4uit/util?code=`;

  constructor(private http: HttpClient) { }

  // método que realizará la petición para obtener los departamentos
  getDepartamentos() {
    // acá ponemos el parámetro code = ubigeo para que te devuelva los departamentos
    this.http.get(this.url + 'ubigeo')
      .subscribe( (resp: Department[]) => {
        console.log(resp, 'departamentos');
        this.departamentos = resp;
      });
  }

  // método que realizará la petición para obtener las provincias de un departamento
  // code es el parámetro que recibe el método y que enviaremos como parámetro de endpoint en code 
  getProvincias(code: any) {
    // limpiamos las provincias
    this.provincias= [];
    // obtenemos las provincias con el parámetro code = code
    this.http.get(this.url + code)
      .subscribe( (resp: Province[]) => {
        console.log(resp, 'provincias');
        this.provincias = resp;
      });
  }
}

Luego en tu componente debes mandar a llamar al servicio para que obtenga las provincias:

export class ResidenteAporteStepComponent implements OnInit {

  firstFormGroup: FormGroup;
  secondFormGroup: FormGroup;
  public formSubmitted = false;

  constructor(
    private _formBuilder: FormBuilder,
    public ubigeo: Ubigeo,
    ) {}
  
  ngOnInit(): void {
    this.ubigeo.getDepartamentos();
  }

  // Cargando Datos del servicio 4uit localstorage
  firstName =  localStorage.getItem('firstName' || '').toLowerCase();
  amountAvailable =  localStorage.getItem('amountAvailable' || '');

  // carga Provincias cambio tu parámetro a any, haz puesto tipo number, pero por lo que veo en consola es un string, no un número.
  onSelect(code: any): void {
    console.log(code);
    this.ubigeo.getProvincias(code); // con esto ya hemos obtenido las provincias del departamento seleccionado, ahora solo falta ponerlo en la plantilla html.
  } 
}

Entonces en tu plantilla finalmente solo debes recorrer las provincias...

<mat-form-field class="select-width">
    <mat-label>Departamento</mat-label>
    <select matNativeControl required [(ngModel)]="selectedDepartament.code" (change)="onSelect($event.target.value)">
        <option *ngFor="let departments of ubigeo.departamentos" value={{departments.code}}>{{departments.description | titlecase}}</option>
    </select>
</mat-form-field>

<mat-form-field class="select-width">
    <mat-label>Provincia</mat-label>
    <!-- recorremos las provincias con un *ngFor -->
    <select matNativeControl required>
        <option *ngFor="let province of ubigeo.provincias" value="{{province.code}}">{{province.description | titlecase}}</option>
    </select>
</mat-form-field>

Espero esto te sea de utilidad, y espero también solucione tus dudas.

1
  • Gracias , me sirvio. gracias por la ayuda. el 20 nov. 2020 a las 13:58

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.