Оказывается, что они являются новыми в угловой машинописи, и у меня есть следующие неудобства.
У меня есть два раскрывающихся списка (выберите), в одном из которых перечислены регионы страны (например, север, юг), а в другом - список городов. Что мне нужно, так это то, что при выборе региона в первом выборе во втором выборе будут отображаться только города, принадлежащие выбранному региону.
Информация (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>
Примечание: я не включаю код, используемый для обращения к регионам и городам из моей базы данных, чтобы не сделать вопрос слишком обширным.
Будь примером структуры 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 на этом он проверяет этот ответ.