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

Question

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

问题是，当我在第一个下拉列表中选择(参见链接)值“二”并在刚刚出现的下拉列表中选择另一个值时，这个值消失了。

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

(当我在第一个下拉列表中选择值“第一”并再次选择值“二”时，再次出现)

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

点击链接其实很容易理解。

如果你能解决我的问题，我就是接受者。

预先感谢您的回答，祝您有个愉快的一天。

问候，瓦伦丁

Answer 1

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

发生的事情是，当您在第一个下拉列表中选择选项“two”时，*ngIf="usForm.value.type == 'two' 的计算结果为 true 并出现第二个下拉列表。但是，当您在第二个下拉列表中选择任何内容时，因为它具有相同的 formControlName，它会将 type 的值更改为某些内容否则，使 *ngIf="usForm.value.type == 'two' 评估为 false，因此第二个下拉列表消失。

对于这个选择选项，你应该有一个不同的 formControlName。可能像子类型。

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