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

Question

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

麻烦的是，当我在第一个下拉列表中选择（请参阅链接）时，值“ two”，而我在下拉列表中选择了另一个值，而这个值消失了。

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

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

我做了一些研究，发现一个有趣的链接与我的问题相对应，但是它与AngularJs有关，当我阅读到该链接时，它不起作用（此外，我的下拉列表根据下拉列表的值显示上面的列表） 当选中一个项目时，AngularJS选择框选项消失

点击链接实际上非常简单易懂。

如果您有解决我问题的方法，我就是接受者。

预先感谢您的回答，祝您愉快。

问候，瓦伦丁

Answer 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>

Answer 2

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

      <select formControlName="type"

当您在第一个选择框中选择选项“ two”时， *ngIf="usForm.value.type == 'two'变为true，并且第二个下拉菜单显示在视图中。选择，因为它具有相同的formControlName，它将type的原始值更改为新选择的值，这使*ngIf="usForm.value.type == 'two'变为false，这就是第二个下拉列表不存在的原因消失了。