Выпадающий список в раскрывающемся списке исчезает Angular 5
У меня есть форма в Angular 5, или когда я выбираю значение в раскрывающемся списке, отображается другое.
Проблема в том, что когда я выбираю (см. Ссылку) в первом раскрывающемся списке значение «два» и выбираю другое значение в раскрывающемся списке, которое только что появляется, оно исчезает.
https://stackblitz.com/edit/angular-a4va9u?embed=1&file=src/app/app.component.html
(И когда я выбираю значение «первый» в первом раскрывающемся списке и снова значение «два», то оно появляется снова)
Я провел небольшое исследование и нашел интересную ссылку, которая соответствует моей проблеме, но она связана с AngularJs, и когда я читаю ее о своей проблеме, она не работает (кроме того, мой раскрывающийся список отображается в соответствии со значением раскрывающегося списка список выше) Параметры поля выбора AngularJS исчезают при выборе элемента
Переход по ссылке на самом деле очень простой для понимания.
Если у вас есть решение моей проблемы, я его беру.
Заранее благодарю вас за ответы, желаю вам хорошего дня.
С уважением, Валентин
Ответы 2
Оба раскрывающихся списка имеют одинаковый formControlName.
что происходит, когда вы выбираете вариант «два» в первом раскрывающемся списке, *ngIf = "usForm.value.type == 'two' оценивается как true, и появляется второе раскрывающееся меню. Однако, когда вы выбираете что-либо во втором раскрывающемся списке, поскольку он имеет тот же formControlName, он меняет значение type на другое, заставляя *ngIf = "usForm.value.type == 'two' оценивать значение false, и поэтому второе раскрывающееся меню исчезает.
Для этого параметра выбора у вас должно быть другое имя formControlName. Возможно, как sub-type.
<p id = "champs" *ngIf = "usForm.value.type == 'two'">Appears
<select formControlName = "sub_type" name = "consistance">
<option style = "display:none">
<option [value] = "appears.name" *ngFor = "let appear of appears">
{{appear.name}}
</option>
</select>
</p>
В раскрывающемся списке кода есть тот же formcontrolName.
<select formControlName = "type"
когда вы выбираете опцию «два» в первом поле выбора, *ngIf = "usForm.value.type == 'two' становится истинным, и второе раскрывающееся меню отображается в поле зрения.
Но когда вы выбираете что-либо еще во втором выборе, поскольку оно имеет то же имя formControlName, оно изменяет исходное значение type на новое выбранное значение.
Это приводит к тому, что *ngIf = "usForm.value.type == 'two' становится ложным, и поэтому ваше второе раскрывающееся меню не исчезает.
Большое спасибо за ответ, он должен решить мою проблему;) Прекрасный день