Angular * ngFor模板中的FormGroup-找不到另一个支持对象错误

Question

我正在尝试遍历模板中的FormControls的FormGroup。我想为每个显示一个复选框。这就是我的component.ts的样子

tags = ["vegan","vegetarian","meat","fruit","vegetable","seafood","fish","nut"];

get tagsForForm() {
    return this.foodForm.get('tags') as FormGroup;
}

createTagsForForm(): {[key: string]: any} {
    let tagsForForm = {};
    for (let i = 0; i < this.tags.length; i++){
        tagsForForm[this.tags[i]]=false;
    }
    return tagsForForm;
}

ngOnInit(){
    this.foodForm = this.fb.group({
        foodName: [''],
        tags: this.fb.group(this.createTagsForForm())
    });
}

我的template.html看起来像这样：

<section formGroupName="tags">
    <h2>Tags</h2>
    <input *ngFor="let tag of tagsForForm" [formControlName]="tag" type="checkbox">
</section>

在控制台中出现此错误：

"Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays."

是否无法在模板中的FormGroup上循环，还是仅缺少某些内容？

Answer 1

您需要使用keyvalue管道来循环对象。尝试以下操作

keyvalue

<input *ngFor="let tag of tagsForForm | keyvalue" [formControlName]="tag.value" type="checkbox"> 中提供属性值，tag.value中提供属性键。

更新

tag.key似乎没有返回正确的对象进行循环。您可以尝试将其替换为this.foodForm.get('tags') as FormGroup。尝试以下操作

控制器

this.foodForm.controls['tags']['controls'];

模板

export class AppComponent  {
  foodForm: FormGroup;
  tags = ["vegan", "vegetarian", "meat", "fruit", "vegetable", "seafood", "fish","nut"];

  get tagsForForm() {
    return this.foodForm.controls['tags']['controls'];
  }

  constructor(private fb: FormBuilder) {}

  createTagsForForm(): {[key: string]: any} {
    let tagsForForm = {};
    for (let i = 0; i < this.tags.length; i++){
      tagsForForm[this.tags[i]] = false;
    }
    return tagsForForm;
  }

  ngOnInit() {
    this.foodForm = this.fb.group({
      foodName: [''],
      tags: this.fb.group(this.createTagsForForm())
    });
  }
}

或者，如果要使用成员变量（此处为

<form [formGroup]="foodForm">
    <label>Name: </label>
    <input formControlName="foodName" />
    <section [formGroup]="foodForm.controls.tags">
    <ng-container *ngFor="let tag of tagsForForm | keyvalue">
      <label>{{ tag.key | titlecase }}</label>
      <input [formControlName]="tag.key" type="checkbox">
      <br>
    </ng-container>
  </section>
</form>

）生成嵌套表单组，则可以对其进行循环处理，以避免获取方法和其他额外开销。以下内容也可以工作

tags

工作示例：

<form [formGroup]="foodForm">
    <label>Name: </label>
    <input formControlName="foodName" />
    <section [formGroup]="foodForm.controls.tags">
    <ng-container *ngFor="let tag of tags">
      <label>{{ tag | titlecase }}</label>
      <input [formControlName]="tag" type="checkbox">
      <br>
    </ng-container>
  </section>
</form>

Answer 2

在使用对象而不是数组时使用键值管道

Stackblitz

使用此链接以获取更多信息<input *ngFor="let tag of tagsForForm| keyvalue" [formControlName]="tag.value" type="checkbox">