Question

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

src \ app \ components \ search.component.html（105,62）中的错误：：类型'AbstractControl'上不存在属性'controls'。

search.component.html（105,62）：

fwrite(..., dateTimeAs="write.csv")

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

<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>

任何帮助都将不胜感激。

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

Answer 1

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

  <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>

通知正在访问controls表单数组的tags属性。

组件代码如下：

  // 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;
    }

如果您可以对自己的情况进行快速介绍，我们也许可以更好地确定出什么问题了。

更新

我从堆栈闪电下载了您的代码，因此可以使用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"

让我知道这是否对您不起作用。

Answer 2

更改此部分：

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">

将解决此问题。

Angular项目在构建时遇到AbstractControl错误

2 个答案: