错误：找不到路径为的控件-Angular formControlName不'；看不到{{form.value | json}}显示的键

使用formBuilder创建新工作程序时，我需要将引用（Firestore键）传递给该工作程序提供的服务，因为我希望它们（键）是复选框上的formControlName指令：

 buildForm = () => {this.workerForm = this.formBuilder.group({
    name: ['', {validators: [Validators.required]}],
    services: this.formBuilder.group({
    })})

在“服务”字段中，我希望有对-firebaseServiceKey:false。我不确定是否可以使用*ngFor动态执行此操作（向对象添加属性），因此我创建了一个函数：

mapControlPaths = () => {
    this.servicesService.getServicesKeys().subscribe(res => res.map(key => 
      this.workerForm.value.services[key] = false
        ))}

它似乎工作得很好（我用pre标签看到结果）：

但是，当我在HTML模板中添加以下行时：

  <div formGroupName="services">
        <label *ngFor="let service of services" for="services">{{service.name}}
            <input formControlName="{{service.key}}" type="checkbox" name="services" id="{{service.key}}">
        </label>
    </div>

---

一切正常。我认为这是一个异步问题，但显然不是。那么问题出在哪里呢？

我认为您应该使用FormArray而不是FormGroup，因为您有一个键值对数组。（请注意，变量名来自我的Stackblitz示例，可能与您的代码有所不同，但我希望您能理解这一点。）

之后，应将键值数组推送到控件数组：

    this.servicesArray.forEach(x => {
      control.push(
        this.formBuilder.group({
          key: x.key,
          value: x.value,
        })
      )
    });

---

请检查我用两个组件制作的Stackblitz示例，“GoodComponent”和“BadComponent”：。控制台中显示的错误来自坏组件。

您不能以这种方式使用插值。你可以使用[formControlName]=“service.key”@MikeOne实际上，我可以。这两方面都很好。不过还是谢谢你抽出时间。我几乎可以肯定一切都连接良好，因为如果我自己键入firestore密钥，就不会有错误。

buildForm = () => {
this.workerForm = this.formBuilder.group({
  name: ['', { validators: [Validators.required] }],
  services: this.formBuilder.group({
    "0IyxGP51E3rSvUZfJdPP": false,
    "80MBmjEOeSc44jluVWjf": false,
    "ELaMKPQZ0ejHeaOzzBtS": false
  })
})

    this.form = this.formBuilder.group({
      name: ['', {validators: [Validators.required]}],
      services: this.formBuilder.array([])
    });

    this.servicesArray.forEach(x => {
      control.push(
        this.formBuilder.group({
          key: x.key,
          value: x.value,
        })
      )
    });