Angular 项目在构建时出现 AbstractControl 错误

Question

我有一些代码在构建时出错

src\app\components\search.component.html(105,62) 中的错误：：“AbstractControl”类型上不存在属性“控件”。

search.component.html(105,62)：

<div class="col-xs-3 checkbox" formArrayName="events" *ngFor="let event of form.controls.events.controls; let i = index">
    <label>
      <input type="checkbox" [formControlName]="i">
          {{events[i]}}
    </label>
    <br *ngIf="i%4 === 3"/>
</div>

search.component.ts（处理事件的部分）：

ngOnInit() { 
    this.eventsList = [
    ['item 1 A','item 2 A'],
    ['item 1 B','item 2 B'],
    ['item 1 C','item 2 C']
    ];

    this.events = [].concat.apply([], this.eventsList);

    this.form = new FormGroup({
    type: new FormControl(),
    state: new FormControl(),
    events: this.buildEventsForm()
    });
}



buildEventsForm() {
    let formControlArr = this.events.map((e: any) => {
    return new FormControl(false);
    });
    return new FormArray(formControlArr);
} 

非常感谢任何帮助。

https://stackblitz.com/edit/angular-ig3pau

Answer 1

改变这部分：

form.controls.events.controls

到

form.controls.events.['controls']

在

<div class="col-xs-3 checkbox" formArrayName="events" *ngFor="let event of form.controls.events.controls; let i = index">

将解决问题。

Answer 2

我之前的回答并不完全准确。我只是看了我的一个，它看起来像这样：

  <div formArrayName="tags">
    <div *ngFor="let tag of tags.controls; let i=index">
      <label class="col-md-2 col-form-label"
             [attr.for]="i">Tag</label>

        <input class="form-control"
               [id]="i"
               type="text"
               [formControlName]="i" />
    </div>
  </div>

注意正在访问tags表单数组的controls属性。

组件代码如下所示：

  // Provides the FormArray accessed in the *ngFor
  get tags(): FormArray {
    return <FormArray>this.productForm.get('tags');
  }

  ngOnInit(): void {
    this.productForm = this.fb.group({
      productName: ['', Validators.required,
      tags: this.fb.array([]),
      description: ''
    });
  }

这和你的很相似。

如果您在其中添加日志记录，您会看到正确的信息吗？

buildEventsForm() {

        let formControlArr = this.events.map((e: any) => {
        return new FormControl(false);
        });
        const newFormArray = new FormArray(formControlArr);
        console.log(newFormArray);
        return newFormArray;
    } 

如果您可以提供您的场景的堆栈闪电，我们可能能够更好地确定可能出了什么问题。

更新

我从您的 stackblitz 下载了您的代码，因此我可以使用 ng serve --prod 选项运行它并得到与您报告的相同的错误。

我能够通过使其更接近我上面发布的代码的原始版本来修复它。

仅使用：

form.controls.events.controls

在您的 HTML 中不适合将值强制为正确的类型。在我上面的代码中，请注意 tags getter。这确实正确地强制了数据类型。

因此，在您的代码中，您需要将其添加到您的组件中：

  get eventFormArray() {
    return <FormArray>this.form.get('events');
  }

<FormArray> 将值强制转换为正确的数据类型。

然后在您的 html 中，您在 ngFor 中使用此 getter：

*ngFor="let event of eventFormArray.controls; let i = index"

如果这对你不起作用，请告诉我。