4

resulta que son nuevo en angular typescript y tengo el siguiente inconveniente.

Tengo dos lista desplegables (select) una me lista las regiones de un país (ej: norte, sur) y el otro me muestra una lista de ciudades. Lo que necesito es que cuando seleccione una región en el primer select, en el segundo select solo aparezcan las ciudades que pertenecen a la región seleccionada.

La información (id, nombre) de las regiones y ciudades están guardadas en tablas en mi base de datos de postgresql. Ya realice el select a mi base de datos y tengo la información de las regiones y ciudades guardadas en un array (regiones:Array=[];) y (ciudades:Array[];).

En el archivo html tengo un select en el cual se muestran los nombres de las regiones existentes en mi base de datos.

---- codigo html del primer select----------------------

<select [(ngModel)]="region.id_region (ngModelChange)="handleChange(region.id_region)">
<option *ngFor="let region of regiones" value="{{region.id_region}}">
{{region.nombre_region}}</option>
</select>

pero no se como hacer que en mi otro select se muestren las ciudades relacionadas con la región que elijo inicialmente. A mi método handleChange le esta llegando el id de la región que elijo en el primer select. Pero no se como condicionar dicho método para que se llene con las ciudades correspondientes a dicha región.

---------Codigo metodo handleChange (archivo .ts)---------

handleChange(id_region) {
    this.ciudadRegion="resultado de la consulta select a mi base de datos dependiendo del id_region que recibe."
  }

---- codigo html del segundo select--------------

 <select>
                    <option *ngFor="let ciudad of ciudades" value="{{ciudad.id_ciudad}}">
                        {{ciudad.nombre_ciudad}}
                    </option>
                </select>

Nota: No incluyo el código de usado para consultar las regiones y ciudades desde mi base de datos para no hacer demasiado extenso la pregunta.

3
  • Yo lo haría puramente con html, usando "ul li listas horizontales" busca eso en google.
    – EduBw
    el 28 nov. 2019 a las 7:46
  • Puedes crear un nuevo atributo por ejemplo: ciudadesPorRegion y lo inicializas como un aray vacio, de este atributo harías el segundo *ngFor, despues tu metodo handleChange() debería modificar ciudadesPorRegion a partir de ciudades con un .filter() por ejemplo y ya lo tendrías.
    – Chema
    el 28 nov. 2019 a las 7:59
  • No entiendo muy bien el problema. Tienes dos listas, una que depende de otra?. Y cada vez que cambias el select de regiones consultas para tener obtener las ciudades de esa región?
    – Legna
    el 28 nov. 2019 a las 17:35

2 respuestas 2

1

Esta seria un ejemplo de la estructura html:


<div class="row ml-5 mt-5">
<div class="col-6">
  <select
    (change)="cambioRegion($event.target.value)"
   class="custom-select">
  <option disabled selected> Selecciona una opcion</option>
  <option *ngFor="let region of regiones" [value]='region' > {{region}}</option>

</select>
</div>
<div *ngIf="ciudades.length > 1" class="col-66">
  <select class="custom-select">
  <option *ngFor="let ciudad of ciudades" > {{ciudad}}</option>

</select>
</div>

</div>

La lógica se plantearía de esta manera en tu component.ts:


regiones = [
    'sur',
    'norte',
    'centro',
  ]

  ciudades = []

  ciudadesSeleccion = {
    'sur': ['ciudad1', 'ciudad2'],
    'norte': ['ton', 'dkflj'],
    'centro': ['laa', 'dfk3'],

  } 


  cambioRegion(dato){
    //Aqui va tu logica de consulta a la BD

    this.ciudades = this.ciudadesSeleccion[dato]
  }

La clave esta en obtener el valor del select con $event.target.value que retorna el [value] definido dentro del option. Si no defines este valor se toma lo que este entre ambas etiquetas. De esta manera <option> esteValor </option>.

Te dejo el link del código funcionando aquí.

El evento que necesitas en esta ocasión es (change) por que no estas usando directivas ngModel. Para mas información sobre esto revisa esta respuesta.

0

Esta seria la estructura de HTML que use:

<select title="pructo" [(ngModel)]="field_producto" class="form-control" id="producto" name="producto">
      <option *ngFor="let producto of productos;" value="{{producto}}">{{producto}}</option>
 </select>
<select title="locaciones" [(ngModel)]="field_locaciones" class="form-control" id="locaciones" name="locaciones">
    <option *ngFor="let locacion of locaciones" [hidden]='!(field_producto == locacion.producto)' value=" {{locacion.nombre}}">{{locacion.nombre}}</option>
 </select>

Siendo productos un Array[] y Locación un arreglo de objetos que contiene el nombre del producto y el nombre de la locación y aquí el hidden funciona como una sentencia if, ya que no se puede colocar un *ngFor con *ngIf, y lo que hacemos con el hidden es solo ocultar el elemento.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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