html - Angular 5 中下拉框的下拉列表消失

我在 Angular 5 中有一个表单，当我在下拉列表中选择一个值时，它会显示另一个值。

问题是当我在第一个下拉列表中选择（见链接）值 'two'，然后在刚出现的下拉列表中选择另一个值时，这个值就消失了。

https://stackblitz.com/edit/angular-a4va9u?embed=1&file=src/app/app.component.html

（当我在第一个下拉列表中选择“first”值，然后再次选择重新出现的“two”值时）

我进行了一些研究，发现了一个有趣的链接与我的问题相关，但它是关于 AngularJs 的，当我将其应用到我的问题时不起作用（此外，我的下拉列表会根据上方下拉列表的值显示）AngularJS 选择框在选择某个项目后选项消失

点击链接实际上非常容易理解。

如果你有解决我问题的方法，我愿意接受。

提前感谢您的回答，祝您有美好的一天。

此致，瓦伦丁

答案＃1

两个下拉菜单都有相同的formControlName

发生的情况是，当你在第一个下拉菜单中选择“two”选项时，*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>

答案＃2

代码中的下拉菜单具有相同的 formcontrolName。

      <select formControlName="type"

当你在第一个下拉框中选择“two”选项时，*ngIf="usForm.value.type == 'two'" 会变为 true，第二个下拉框就会显示出来。但当你在第二个下拉框中选择其他任何选项时，因为它有相同的 formControlName，会将 type 的原始值更改为新选择的值。这导致 *ngIf="usForm.value.type == 'two'" 变为 false，这就是你的第二个下拉框消失的原因。