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

Question

已经发布了许多针对此错误的博客,但没有为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>

我无法解决此问题.我已经关注这个博客来提出动态控制

更新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 = production --environment = prod

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

节点版本 - v6.11.1

npm版本 - 3.10.10

角度版 - 4.0

不知道究竟是什么导致了错误.

Answer 1

深挖找到了解决办法后在这里.当你正在做的生产版本,你必须使用的问题可以通过给你的组件get方法来固定的:

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

然后在你的模板中:

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

希望这对你有用

Answer 2

我也面临同样的问题,ng build但只是用[]修复,

*ngFor="let _policy of DynamicFormControls['controls'] ; let i=index"

使用上面的行而不是下面的行

 *ngFor="let _policy of DynamicFormControls.controls ; let i=index"