Javascript 角形数组导致另一个窗体中的窗体控件丢失

我有一个角度组件，它显示来自FormArray的数据，但还有另一个FormGroup，它只有在单击按钮时才可见

当组件加载时，如果我单击按钮使另一个窗体立即可见，那么它就会工作。但是，当我使另一个窗体可见时，如果我首先单击另一个按钮或其中一个FormArray输入，则会出现“找不到控件”错误。单击关闭，然后重新显示另一个窗体，则该窗体将正常工作

我花了好几个小时试图找出哪里出了问题，而且似乎只有当有一个*ngFor循环遍历FormArray项时才会出现问题。我将其归结为以下示例：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormArray } from '@angular/forms';

@Component({
  selector: 'app-test-filter-component',
  templateUrl: './test-filter-component.component.html',
  styleUrls: ['./test-filter-component.component.scss']
})
export class TestFilterComponentComponent implements OnInit {

  public testform: FormGroup;
  public otherForm: FormGroup;
  public otherFormVisible = false;

  constructor() {}

  get orders() {
    return this.testform.get('orders') as FormArray;
  }

  anotherClick() {}

  ngOnInit() {
    this.testform = new FormGroup({
      orders: new FormArray([])
    });
    this.otherForm = new FormGroup({
      test: new FormControl('testvalue')
    });
    for(let idx = 0; idx < 50; idx++) {
      this.orders.push(new FormGroup({id: new FormControl(idx), name: new FormControl('test')}));
    }
  }
}

从'@angular/core'导入{Component，OnInit}；
从'@angular/forms'导入{FormGroup，FormControl，FormArray}；
@组成部分({
选择器：“应用程序测试筛选器组件”，
templateUrl:“./test filter component.component.html”，
样式URL:['./测试过滤器组件.component.scss']
})
导出类TestFilterComponentComponent实现OnInit{
公共测试表单：FormGroup；
其他公共形式：FormGroup；
public otherFormVisible=false；
构造函数（）{}
获得订单{
将此.testform.get（'orders'）作为FormArray返回；
}
另一个click（）{}
恩戈尼尼特（）{
this.testform=new FormGroup({
订单：新订单（[]）
});
this.otherForm=新表单组({
测试：新FormControl（'testvalue'）
});
for（让idx=0；idx<50；idx++）{
push（newformgroup（{id:newformcontrol（idx），name:newformcontrol（'test'）}））；
}
}
}

其他形式
先点击这里
试验控制

如果直接单击“其他表单”，则会正确显示其他表单，但如果首先单击“单击此处”或任何其他输入，则会显示以下错误信息：

错误：找不到名为“test”的控件

如果有人知道如何使它正常工作，它将使我免于数小时的沮丧。

您可以替换它

<div *ngIf="otherFormVisible">

与

---

同意@Stratubas的回答，感谢他指出问题所在

此问题在chrome版本is 79.0.3945.130（官方版本）（64位）中不可复制

但我在Microsoft Edge的@PierreDuc提供的stackblitz链接中尝试了相同的问题，该链接的

版本为80.0.361.48

（官方版本）（64位），这个问题在这里可以复制。此浏览器是Microsoft基于Chromium的浏览器

---

我希望这将有助于任何人在未来

虽然接受的答案确实解决了我发布的小示例，但当我的表单变得更复杂时，问题很快又出现了

经过进一步搜索，我发现这实际上是一个Chrome80的bug+

这里有一个解决方法解决了我的问题：

---

无法重现您的Typescript代码中给出的问题。我猜您缺少另一个Click（）实现代码。你能不能提供它是可复制的：你能复制这个问题吗，因为我不是。我只是好奇地想知道，@SatishPai是的，我知道了，在PierreDuc的stackblitz你能告诉我确切的步骤吗？@SatishPai无需做任何事情，只需点击“其他表单”按钮。我看不到错误和额外按钮之间有任何一致的关系，但如果使用

[hidden]

而不是

*ngIf

，则不会出现错误，因此，没错，我在microsoft chromium edge browser中遇到了错误。谢谢，斯特拉图巴斯，我在挠头。

<div *ngIf="otherFormVisible">

<div [hidden]="!otherFormVisible">