Angular 如何根据数据库中的值将动态复选框设置为选中？

我不熟悉被动表单，并且努力动态地将复选框的值设置为true。 下面是一个例子： 我从数据库中获取特定用户的预选水果值，当用户加载页面时，需要检查这些水果

我正在使用以下html代码：

<ng-container>
<div class="form-check form-check-inline" style="display: block;" *ngFor="let control of fruitsArray.controls; let i = index;">
  <input *ngIf="i<11" class="form-check-input" [formControl]="control" type="checkbox" id="inlineCheckbox{{i}}" [checked]="fruitsCheck[i].checked">
  <label *ngIf="i<11" class="form-check-label" for="inlineCheckbox{{i}}">{{fruitsCheck[i].label}} <br /></label>
</div>

使用上面的代码，我可以将适当的复选框设置为选中状态，但是在检查特定复选框控件的值时，它仍然显示为false。我不仅希望复选框被选中，而且希望控件的值被设置为true

我读过patchValue，但不确定如何使用它将值设置为动态复选框。 提前感谢您的帮助

是以反应形式填充复选框列表的一个工作示例

import { Component, OnInit } from "@angular/core";
import { FormArray, FormBuilder, FormGroup } from "@angular/forms";
import { take } from "rxjs/operators";
import { DataService } from "./data.service";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  public fruitsForm: FormGroup;

  get fruitsArray() : FormArray {
    return this.fruitsForm.get('fruits') as FormArray
  } 

  constructor(private dataService: DataService, private fb: FormBuilder) {}

  ngOnInit(): void {
    this.dataService
      .getFruits()
      .pipe(take(1))
      .subscribe(fruits => {
        this.fruitsForm = this.fb.group({
          name: "Joe Bloggs",
          fruits: this.fb.array(fruits.map(f => this.fb.group(f)))
        });
      });
  }
}

HTML

我们使用该服务构建表单

我们将控件绑定到一个名为

的水果表单中

在我们的

表单组

中，

水果

是一个，允许许多输入

每个

水果

对象都映射到一个新的

表单组

，并且

水果

对象中的每个属性都将转换为

表单控件

groutsarray

getter是为了更容易访问表单属性

为了将我们的模板连接到

FormArray

，我们使用

formArrayName

指令

formGroupName

指令使用索引在我们的

fruits

FormGroup

中查找正确的

FormGroup

。要将我们的复选框连接到选中的

控件，我们使用
formControlName
指令。
是以反应形式填充复选框列表的一个工作示例

import { Component, OnInit } from "@angular/core";
import { FormArray, FormBuilder, FormGroup } from "@angular/forms";
import { take } from "rxjs/operators";
import { DataService } from "./data.service";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  public fruitsForm: FormGroup;

  get fruitsArray() : FormArray {
    return this.fruitsForm.get('fruits') as FormArray
  } 

  constructor(private dataService: DataService, private fb: FormBuilder) {}

  ngOnInit(): void {
    this.dataService
      .getFruits()
      .pipe(take(1))
      .subscribe(fruits => {
        this.fruitsForm = this.fb.group({
          name: "Joe Bloggs",
          fruits: this.fb.array(fruits.map(f => this.fb.group(f)))
        });
      });
  }
}

HTML

我们使用该服务构建表单

我们将控件绑定到一个名为
的水果表单中

在我们的
表单组
中，
水果
是一个，允许许多输入

每个
水果
对象都映射到一个新的
表单组
，并且
水果
对象中的每个属性都将转换为
表单控件

groutsarray
getter是为了更容易访问表单属性

为了将我们的模板连接到
FormArray
，我们使用
formArrayName
指令

formGroupName
指令使用索引在我们的
fruits
FormGroup
中查找正确的
FormGroup
。要将复选框连接到选中的
控件，我们使用
formControlName
指令

import { Component, OnInit } from "@angular/core";
import { FormArray, FormBuilder, FormGroup } from "@angular/forms";
import { take } from "rxjs/operators";
import { DataService } from "./data.service";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  public fruitsForm: FormGroup;

  get fruitsArray() : FormArray {
    return this.fruitsForm.get('fruits') as FormArray
  } 

  constructor(private dataService: DataService, private fb: FormBuilder) {}

  ngOnInit(): void {
    this.dataService
      .getFruits()
      .pipe(take(1))
      .subscribe(fruits => {
        this.fruitsForm = this.fb.group({
          name: "Joe Bloggs",
          fruits: this.fb.array(fruits.map(f => this.fb.group(f)))
        });
      });
  }
}

<ng-container *ngIf="fruitsForm">
    <form [formGroup]="fruitsForm">
        <input name="name" formControlName="name" />
        <div formArrayName="fruits">
            <div *ngFor="let fruit of fruitsArray.controls; let i = index" [formGroupName]="i">
                <input type="checkbox" formControlName="selected" />
                <label>{{fruit.value.name}}</label>
            </div>
        </div>
    </form>
    <br />
    <div>{{fruitsForm.value | json}}</div>
</ng-container>

import { Injectable } from "@angular/core";
import { Observable, of } from "rxjs";
import { delay } from "rxjs/operators";

interface Fruit {
  id: number;
  name: string;
  selected: boolean;
}

@Injectable()
export class DataService {
  constructor() {}

  public getFruits(): Observable<Fruit[]> {
    return of([
      {
        id: 1,
        name: "Apple",
        selected: true
      },
      {
        id: 2,
        name: "Pear",
        selected: false
      },
      {
        id: 3,
        name: "Orange",
        selected: false
      }
    ]).pipe(delay(250));
  }
}