Angular 6窗体找不到控件错误

我正在尝试以角度构建表单数组。当数据没有显示时，我最小化代码以显示行为。最后的代码必须使用表单数组。请帮我渡过难关。我用的是角度6

为什么我会出现这个错误：

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

//我的组件.ts文件
从'@angular/forms'导入{FormControl，FormArray，FormBuilder，FormGroup}；
导出类MyComponent实现OnInit、OnDestroy{
私有结果形式：FormGroup；
private$：Subject=新Subject（）；
结果数据=[
{
文本：“我的文本”，
}];
构造函数（专用formBuilder:formBuilder）{
this.resultForm=this.formBuilder.group({
childData:this.formBuilder.array（[]）
});
这个.setmainpoptions（）；
}
setmainpoptions（）{
const control=this.resultForm.controls.childData；
this.resultData.forEach（x=>{
控件。推送（this.formBuilder.group({
text:newformcontrol（）}）
})
}
恩戈尼尼特（）{
}
恩贡德斯特罗（）{
此.complete$.complete（）；
}
}
//我的html
{{resultForm.value | json}

---

非常感谢

我试图用重现您的错误，发现您必须修改代码以实现您想要的，这是我的理解。请检查链接，代码现在不会在控制台中抛出任何错误

更改代码如下：

///组件
从“@angular/core”导入{Component，OnInit，OnDestroy}；
从'@angular/forms'导入{FormControl，FormArray，FormBuilder，FormGroup}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent实现OnInit、OnDestroy{
私有结果形式：FormGroup；
//private$：Subject=新Subject（）；
结果数据=[
{
文本：“我的文本1”，
},
{
文本：“我的文本2”，
},
{
文字：“我的文字3”，
},
{
文字：“我的文字4”，
}];
构造函数（专用formBuilder:formBuilder）{
this.resultForm=this.formBuilder.group({
childData:this.formBuilder.array（[]）
});
这个.setmainpoptions（）；
}
setmainpoptions（）{
const control=this.resultForm.controls.childData；
this.resultData.forEach（x=>{
控件。推送（新窗体控件（x.text））
})
}
恩戈尼尼特（）{
}
恩贡德斯特罗（）{
//此.complete$.complete（）；
}
}
\\\HTML
{{resultForm.get（'childData'）.controls.length}
{{resultForm.value | json}

你能发布一个最小的stackblitz吗？这将大大有助于在HTML中使用

childData

而不是

resultOptions

。将`formarayname=“resultOptions”`更改为`formarayname=“childData”`。formArrayName必须与您在formGroup中传递的内容相匹配。还可以共享您的

html

视图，查看其中实际引用的内容

// My component .ts file

import {FormControl, FormArray, FormBuilder, FormGroup} from '@angular/forms';
export class MyComponent implements OnInit, OnDestroy  {

  private resultForm: FormGroup;
  private destroyed$: Subject<boolean> = new Subject();

  resultData = [
    {
      text: 'My Text',
    }];

  constructor(private formBuilder: FormBuilder) {

    this.resultForm = this.formBuilder.group({
      childData: this.formBuilder.array([])
    });

    this.setMainOptions();
  }

  setMainOptions() {
    const control = <FormArray>this.resultForm.controls.childData;
    this.resultData.forEach(x => {
      control.push(this.formBuilder.group({
        text: new FormControl()}))
    })
  }
  ngOnInit() {
  }

  ngOnDestroy() {
    this.destroyed$.complete();
  }
}

// my html

    <form [formGroup]="resultForm">
<div formArrayName="resultOptions">
  <div *ngFor="let mainOption of resultForm.get('childData').controls; let i=index">
    <div [formGroupName]="i">
      <input [formControlName]="text" />
    </div>
  </div>
</div>
</form>

<pre>{{resultForm.value | json}}</pre>

  /// Component 

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

  @Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
  })
  export class AppComponent  implements OnInit, OnDestroy  {

    private resultForm: FormGroup;
    // private destroyed$: Subject<boolean> = new Subject();

    resultData = [
      {
        text: 'My Text 1',
      },
      {
        text: 'My Text 2',
      },
      {
        text: 'My Text 3',
      },
      {
        text: 'My Text 4',
      }];

    constructor(private formBuilder: FormBuilder) {

      this.resultForm = this.formBuilder.group({
        childData: this.formBuilder.array([])
      });

      this.setMainOptions();
    }

    setMainOptions() {
      const control = <FormArray>this.resultForm.controls.childData;
      this.resultData.forEach(x => {
        control.push( new FormControl(x.text))
      })
    }

    ngOnInit() {
    }

    ngOnDestroy() {
      // this.destroyed$.complete();
    }
  }

\\\ HTML
<form [formGroup]="resultForm">
<div formArrayName="childData">
  <ng-container> 
  <div *ngFor="let mainOption of resultForm.get('childData').controls; let i=index">
      <input formControlName='{{i}}' />
  </div>
  </ng-container>
</div>
</form>

{{resultForm.get('childData').controls.length}}

<pre>{{resultForm.value | json}}</pre>