下拉框中的下拉列表消失 Angular 5答案

【问题标题】：Drop-down list in drop-down box disappears Angular 5下拉框中的下拉列表消失 Angular 5
【发布时间】：2019-05-17 23:47:10
【问题描述】：

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

问题在于，当我在第一个下拉列表中选择（请参阅链接）值“二”时，我在下拉列表中选择了另一个值，该值刚刚出现，这个值消失了。

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

（当我在第一个下拉列表中选择值“first”并再次选择值“two”时，会再次出现）

我做了一些研究，发现了一个与我的问题相对应的有趣链接，但它与 AngularJs 相关，当我将其阅读到我的问题时它不起作用（此外，我的下拉列表根据下拉列表）AngularJS select box options disappear when an item is selected

点击链接其实很简单理解。

如果你对我的问题有解决方案，我就是接受者。

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

问候，瓦伦丁

【问题讨论】：

标签： html angular typescript

【解决方案1】：

两个下拉菜单都有相同的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>

【讨论】：

非常感谢您的回答，它必须解决我的问题；）美好的一天

【解决方案2】：

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

      <select formControlName="type"

当您在第一个选择框中选择“两个”选项时，*ngIf="usForm.value.type == 'two' 变为真，并且第二个下拉菜单显示在视图中。但是当您在第二次选择中选择其他任何内容时，因为它具有相同的 formControlName，它会将 type 的原始值更改为新选择的值。这会使*ngIf="usForm.value.type == 'two' 变为假，这就是您的第二个下拉菜单不会消失的原因。

【讨论】：