Question

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

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

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

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

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

在此先感谢您的答复，祝您生活愉快。

关于，瓦伦丁

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

Answer 2

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

      <select formControlName="type"

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

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

2 个答案: