生产构建时的 Angular4 编译错误：“AbstractControl 类型上不存在属性控件”答案

【问题标题】：Angular4 compile error on production build: "Property controls does not exist on type AbstractControl"生产构建时的 Angular4 编译错误：“AbstractControl 类型上不存在属性控件”
【发布时间】：2017-09-27 21:23:44
【问题描述】：

我的代码在开发模式下构建和运行完美。当我为生产构建时，我在这一行收到此错误：

        <div *ngFor="let child of form.controls.emailsArray.controls; let i=index">

表单是这样构建的：

  public form: FormGroup;
  private control: FormArray;
  private emailsModel = { emails: ['','','','','']}  // the model, ready to hold the emails
  private fb : FormBuilder;

  constructor() {}

  ngOnInit() {
    this.fb = new FormBuilder;
        this.form = this.fb.group({
      emailsArray: this.fb.array([])
    });
    this.control = <FormArray>this.form.controls['emailsArray'];
    this.patch();    
  }

  private patch(): void {
    // iterate the object model and extra values, binding them to the controls
    this.emailsModel.emails.forEach((item) => {
      this.control.push(this.patchValues(item));
    })
  }

  private patchValues(item: string): AbstractControl {
    return this.fb.group({
      email: [item, Validators.compose([emailValidator])] 
    })
  }

那么如何在html中引用这些子控件呢？

注意：类似于this question，除了我的错误发生在 HTML 中，而不是 typescript。

【问题讨论】：

标签： angular angular-reactive-forms

【解决方案1】：

我不确定这是否是一种好的做法，但将 HTML 更改为此有效：

<div *ngFor="let child of form.controls.emailsArray['controls']; let i=index">

【讨论】：

我以前遇到过这个问题。这也是我使用的解决方案。
@LLai 感谢您确认我并不孤单！ :)

【解决方案2】：

对我来说，这解决了它：

改变

meeting.controls.schedule.controls['scheduleEnd']

到

meeting.controls.schedule['controls'].frequency

【讨论】：