将 --aot 添加到 cli 会破坏应用程序的角度

Question

所以我有一个使用动态表单的 Angular 应用程序，效果很好。但是当我将--aot 添加到我的cli 命令时，我收到错误“AbstractControl”类型上不存在属性“控件”。我试过使用文档中的方法。我仍然得到错误。我的代码附在下面。因为我已经阅读了文档。或者也许这是我想念的东西

import { Component, ElementRef, NgZone, OnInit, ViewChild } from '@angular/core'

    import { FormControl, ReactiveFormsModule, FormGroup, FormArray, FormBuilder, Validators } from "@angular/forms"
    import { Router, ActivatedRoute } from '@angular/router'
    import { Location } from '@angular/common'
    import { CreateEventService } from './create-event.service'
    import { Http, Headers } from '@angular/http'

      @Component({
        selector: 'create-event',
        templateUrl: './create-event.component.html',
        styleUrls: ['./create-event.component.css'],
        providers: [ CreateEventService ]
      })
      export class CreateEventComponent implements OnInit {

      event: any
      tables: string[] = []
      searchControl: FormControl
      ticketForm: FormGroup
      ticketPrices: number[] = []

      @ViewChild("search")
      public searchElementRef: ElementRef

      constructor(private router: Router,private _http: Http, private ngZone: NgZone, private _fb: FormBuilder) { }

      ngOnInit() {
        this.ticketForm = this._fb.group({
            tickets: this._fb.array([
                this.initTicket(),
            ])
        })
        this.searchControl = new FormControl()
      }

      initTicket() {
          return this._fb.group({
              ticketName: [''],
              ticketPrice: [''],
              ticketLimit: ['', Validators.required]
          })
      }

      addTicket() {
          const control = <FormArray>this.ticketForm.controls['tickets']
          control.push(this.initTicket())
      }

      removeTicket(i: number) {
          const control = <FormArray>this.ticketForm.controls['tickets']
          control.removeAt(i)
          this.tables.splice(i, 1)
          //console.log(this.tables)
      }

}

<form [formGroup]="ticketForm" novalidate>
          <div formArrayName="tickets" class="row">
              <div *ngFor="let ticket of ticketForm.controls.tickets.controls let i=index" class="row">
                  <div class="col m7 s12" [formGroupName]="i">
                    <div class="col m5 s12">
                        <input type="text" formControlName="ticketName" placeholder="e.g. Regular, VIP">
                    </div>
                    <div class="col m4 s6">
                        <input type="number" formControlName="ticketPrice" placeholder='Ticket Price &#8358'>
                    </div>
                    <div class="col m3 s6">
                      <input type="number" formControlName="ticketLimit" placeholder="Quantity">
                    </div>
                  </div>
                  <div class="col m2 s2">
                    <br>
                      <a class="primary-base-text" *ngIf="ticketForm.controls.tickets.controls.length > 1" (click)="removeTicket(i)"><i class="fa fa-trash"></i></a>
                  </div>
              </div>
          </div>
          <div class="col">
              <a style="float: left" (click)="addTicket()"><h6>Add another ticket <i class="fa fa-plus"></i></h6></a>
          </div>
</form>

Answer 1

使用 AOT 编译器编译 Angular 模板时，工厂是在 Typescript 中创建的，它保持类型提示。

所以，你在 TS 中说ticketForm 是FormGroup。所以你可以访问ticketForm.controls，这是AbstractControls的映射。然后，访问ticketForm.controls.tickets 会给你一个AbstractControl。

如果您查看文档，您会发现AbstractControl 没有controls 属性。这就是 AOT 编译器触发错误的原因，因为它会将类型添加到 HTML 模板中。

可能的解决方案：

您可以在 TS 中添加一个 getter，以允许访问 tickets FormArray

get ticketsFormArray(): FormArray {
    return this.ticketForm.controls['tickets'] as FormArray
}

并在你的模板中使用它

<div *ngFor="let ticket of ticketsFormArray.controls let i=index" class="row">
...
</div>