Блог

Главная - Вопросы по программированию - Отображать элемент выбора с опцией, зависящей от другого выбора

Отображать элемент выбора с опцией, зависящей от другого выбора

#angular #asynchronous #drop-down-menu #angular-ng-if

Вопрос:

У меня есть выпадающий компонент select с переменной @Input option.

Я хочу отобразить параметры в другом экземпляре этого компонента на основе того, что выбрано в первом

Как этого добиться?

 <select *ngIf="option=='city'" class="form-select border-blue" id="exampleFormControlSelect1">
    <option selected>Select City</option>
    <option *ngFor="let city of cities" value="{{city}}">{{city}}</option>
</select>

Мое текущее «решение» — добавление тега выбора в качестве нового элемента в новой строке, в то время как мне нужно, чтобы зависимый элемент выбора всегда был на странице и ждал первого выбора

 <select *ngIf="selectedCity|async" class="form-select border-blue" id="exampleFormControlSelect1">
    <option selected>Select district</option>
    <option *ngFor="let dist of (districts|async)" value="{{dist}}">{{dist}}</option>
</select>

https://stackblitz.com/edit/angular-ivy-5qthim?file=src/app/select-one/select.component.html

Комментарии:

1. Не совсем уверен, что вы хотите здесь сделать. Может быть, создать пример StackBlitz

2.да, спасибо @Drenai, пожалуйста, смотрите Ссылку stackblitz курсив полужирный code , поэтому я хочу, чтобы на экране ВСЕГДА было меню выбора района с выбранной опцией по умолчанию, и когда я выбираю город, районы будут заполнены в настройках

Ответ №1:

Ну, решение для меня было довольно простым,

  1. Я передал выбранный город родительскому компоненту,
  2. передал его через функцию, получил массив районов для этого конкретного города
  3. Передал массив районов из родительского компонента в мой выбранный (дочерний) компонент.

Моя ошибка заключалась в том, что я пытался добиться функциональности от самого компонента выбора.

Если есть способ сделать это с помощью асинхронного канала, пожалуйста, поделитесь

Метки: