Вопросы Теги

Заполните выбор в зависимости от другого

Оказывается, что они являются новыми в угловой машинописи, и у меня есть следующие неудобства.

У меня есть два раскрывающихся списка (выберите), в одном из которых перечислены регионы страны (например, север, юг), а в другом - список городов. Что мне нужно, так это то, что при выборе региона в первом выборе во втором выборе будут отображаться только города, принадлежащие выбранному региону.

Информация (id, name) регионов и городов хранится в таблицах в моей базе данных postgresql. Я уже выбрал свою базу данных, и у меня есть информация о регионах и городах, которые хранятся в массиве (region: Array = [];) и (towns: Array [];).

В html-файле у меня есть выборка, в которой отображаются имена существующих регионов в моей базе данных.

---- HTML-код первого выбора ---------------------- 

<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>

, но я не знаю, как это сделать в Мой другой выбор показывает города, связанные с регионом, который я выбрал изначально. Мой метод handleChange получает идентификатор региона, который я выбрал при первом выборе. Но я не знаю, как обусловить этот метод так, чтобы он был заполнен городами, соответствующими этому региону.

--------- Код метода HandleChange (файл .ts) --------- 

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

---- HTML-код второго выбора -------------- 

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

Примечание: я не включаю код, используемый для обращения к регионам и городам из моей базы данных, чтобы не сделать вопрос слишком обширным.

2
задан 28.11.2019, 06:19
1 ответ

Будь примером структуры 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>

Она lГіgica plantearГ - в таким образом в тебе 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]
  }

Этот ключ в получении стоимости select с $event.target.value, который возвращает [value], определенный внутри option. Если ты не определяешь эту стоимость, берется то, что находится между обеими этикетками. Таким образом <option> esteValor </option>.

оставил Тебе соединение cГіdigo функционируя aquГ - .

Событие, в котором ты нуждаешься в этой ocasiГіn, - (change), из-за которых ты не используешь директивные органы ngModel. Для больше informaciГіn на этом он проверяет этот ответ.

0
ответ дан 01.12.2019, 10:41