属性“controls”在类型“AbstractControl”上不存在 - angular4

已经有很多博客针对这个错误发布了，但没有一个是针对 Angular4 的。

我正在表单上添加和删除动态控件

在初始化期间向窗体添加控件

    ngOnInit() {
    
        this.lienHolder = this._fb.group({
          emailAddress: ['', [Validators.required, Validators.email]],
          policyDetails: this._fb.array([
            this.initPolicyTemplate(),
          ])
        });
    
      }

     initPolicyTemplate() {
        return this._fb.group({
          policyNumber: ['', [Validators.required, Validators.pattern("(^[^0][A-Z]{1}[0-9]*$)")]],
          vinNumber: ['', [Validators.required, Validators.pattern('^[0-9]{6}$')]],
        });
      }

通过调用此方法添加更多控制

     addPolicyTemplate() {
        const control = <FormArray>this.lienHolder.controls['policyDetails'];
        control.push(this.initPolicyTemplate());
      }

从表单中删除控件

      removePolicyTemplate(i: number) {  
        const control = <FormArray>this.lienHolder.controls['policyDetails'];
        control.removeAt(i);
      }

但是当我构建代码时我收到这样的错误

这是我的html

      <div formArrayName="policyDetails">
            <div *ngFor="let _policy of lienHolder.controls.policyDetails.controls; let i=index">
              <div class="panel panel-default">
                <div class="panel-head">
                  <div class="glyphicon glyphicon-remove pull-right" *ngIf="lienHolder.controls.policyDetails.controls.length > 1" (click)="removePolicyTemplate(i)"></div>
                </div>
                <div class="panel-body">
                  <div [formGroupName]="i">
                    <address [policyGroup]="lienHolder.controls.policyDetails.controls[i]"></address>
                  </div>
                </div>
              </div>
            </div>
          </div>

我无法解决这个问题。我已经关注了this https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2博客提出动态控制

UPDATE 1

当我像这样更改 .ts 代码时

    get DynamicFormControls() {
    
        return <FormArray>this.lienHolder.get('policyDetails');
      }

HTML 代码如下

     <div formArrayName="policyDetails">
            <div *ngFor="let _policy of DynamicFormControls.controls ; let i=index" style="position: relative">
              <add-policy-details [policyGroup]="lienHolder.controls.policyDetails.controls[i]"></add-policy-details>
              <div class="remove-btn" (click)="removePolicyTemplate(i)" *ngIf="lienHolder.controls.policyDetails.controls.length > 1">
              </div>
            </div>
          </div>

它正在工作，我能够使用命令在生产模式下编译该文件

ng build --target=生产 --environment=prod

但从过去的几天来看，我面临着同样的错误，无法在生产模式下编译它，我还没有更新任何我的应用程序

节点版本 - v6.11.1

npm 版本 - 3.10.10

角度版本 - 4.0

不知道到底是什么导致了错误。

深入挖掘后找到了解决方案here https://github.com/angular/angular-cli/issues/6099当您进行生产构建时，您必须使用可以通过为组件提供 get 方法来解决的问题：

get formData() { return <FormArray>this.lienHolder.get('policyDetails'); }

然后在你的模板中：

<div *ngFor="let _policy of formData.controls ; let i=index">

希望这对你有用