Angular 角度：如何循环遍历嵌套在已嵌套在不同FormGroup中的FormGroup中的FormArray？

我使用此代码块创建表单：

@Input() fetchedTask: Task;
taskForm: FormGroup;
formThresholds: FormArray;

我随后使用

setValue（）

设置表单的值：

我使用以下方法设置我的FormArray的值：

this.fetchedTask.configuration.thresholds.forEach((x)=>{
              this.addItem(x.value, x.name);
            })

addItem(value: number, name: string): void {
      this.formThresholds = this.taskForm.get('configuration.thresholds') as FormArray;
      this.formThresholds.push(this.createItem(value, name));
    }

createItem(value: number, name: string): FormGroup{
      return this._formBuilder.group({
        value: value,
        name: name
      });
    }

我真的不知道如何通过数组值进行循环，并以填充值的形式显示它们

我试过了，但没有成功：

        <div *ngFor="let threshold of taskForm.get('configuration.thresholds') let i = index;">
            <div [formGroupName]="i">
                <input formControlName="name" placeholder="Threshold name">
                <input formControlName="value" placeholder="Threshold value">
            </div>
        </div>

---

您可以直接输入HTML，如下所示：

*ngFor="let threshold of taskForm['controls'].configuration['controls'].thresholds['controls']; let i = index;"

或者您可以在组件中创建get属性，并在html或ts文件中使用

get formThresholds():FormArray{
    return this.taskForm.get('configuration.thresholds') as FormArray;
}

---

您可以直接输入HTML，如下所示：

*ngFor="let threshold of taskForm['controls'].configuration['controls'].thresholds['controls']; let i = index;"

或者您可以在组件中创建get属性，并在html或ts文件中使用

get formThresholds():FormArray{
    return this.taskForm.get('configuration.thresholds') as FormArray;
}

---

多亏了古拉夫·加格和我的摆弄，我想出了一个答案

问题是我遗漏了一个父div标记，该标记指向formArray所属的formGroup——“配置”表单组

因此，对于此表单结构：

this.taskForm = this._formBuilder.group({
            taskId: null,
            groupId: this.groupId,
            name: ["", [Validators.required]],
            taskType: this.taskTypeId,
            etc.
            configuration: this._formBuilder.group({
                name: ["", Validators.required],
                path: ["", Validators.required],
                thresholds: this._formBuilder.array([])
            })
        });

get thresholds(): FormArray{
      return this.formThresholds = this.taskForm.get('configuration.thresholds') as FormArray;
    }

如果我想在我的页面上显示阈值，我需要4个标记。 例如：

{{name.value}}
{{value.value}}

多亏了古拉夫·加格和我的摆弄，我想出了一个答案

问题是我遗漏了一个父div标记，该标记指向formArray所属的formGroup——“配置”表单组

因此，对于此表单结构：

this.taskForm = this._formBuilder.group({
            taskId: null,
            groupId: this.groupId,
            name: ["", [Validators.required]],
            taskType: this.taskTypeId,
            etc.
            configuration: this._formBuilder.group({
                name: ["", Validators.required],
                path: ["", Validators.required],
                thresholds: this._formBuilder.array([])
            })
        });

get thresholds(): FormArray{
      return this.formThresholds = this.taskForm.get('configuration.thresholds') as FormArray;
    }

如果我想在我的页面上显示阈值，我需要4个标记。 例如：

{{name.value}}
{{value.value}}

尝试此taskForm['controls'].configuration.thresholds['controls']@GouravGarg尝试您的建议时出现此错误：类型“AbstractControl”上不存在属性“thresholds”。您可以尝试此操作吗？taskForm['controls'].configuration['controls'].thresholds['controls']或您只需创建一个get属性，如get-formArray（）：formArray{将this.taskForm.get（'configuration.thresholds'）返回为formArray；}尝试此taskForm['controls'].configuration.thresholds['controls']@GouravGarg我在尝试您的建议时遇到此错误：“AbstractControl”类型上不存在属性“thresholds”。您可以尝试此操作吗？taskForm['controls'].configuration['controls'].thresholds['controls']或者您只需创建一个get属性，如get-formArray（）：formArray{将this.taskForm.get（'configuration.thresholds'）返回为formArray；}

taskForm['controls'].configuration['controls'].thresholds['controls']成功了！但现在我得到了一组有趣的错误：
找不到名为“0”的控件
，
找不到路径为“0->name”的控件
，
找不到路径为“0->value”的控件
。我已经检查过了，并且在我的thresholds FormArray中有一个FromGroup。您可以检查taskForm['controls']的返回值。配置['controls']。thresholds['controls'][0]。在控制台中获取（'name'）？我已经尝试在我的div标记中添加
formArrayName=“formThresholds”
，但是现在我在错误消息中得到了一个额外的步骤：
“找不到名为：'formThresholds'”的控件，
“找不到路径为：'formThresholds->0'”的控件，
“找不到路径为：'formThresholds->0->name'”的控件
将此添加到formArrayName=“formThresholds”中，在您前面的注释中。
taskForm['controls']的返回值。配置['controls'].thresholds['controls'][0]。get（'name'）
与预期一样：
值：“Duration”
。有趣的是，我为name和value属性获得了一个空白输入，但这些输入中没有值。我已尝试更改初始化表单的位置，并将数据从NgOnChanges绑定到NgOnInit，结果相同。
taskForm['controls']。配置['controls'].thresholds['controls']；
成功了！但现在我得到了一组有趣的错误：
“找不到名为“0”的控件”
，
“找不到路径为“0->name”的控件”“
，
找不到路径为：'0->value'
的控件。我已经检查了，并且在我的thresholds FormArray中有一个FromGroup。你能检查一下taskForm['controls']的返回值。配置['controls'].thresholds['controls'][0]。在控制台中获取（'name'）吗？我已经尝试添加了
formArrayName=“formThresholds”
在我的div标签中：
但是现在我在我的错误消息中得到了一个额外的步骤：
“找不到名为'formThresholds'的控件”
，
“找不到路径为'formThresholds->0->name'的控件”
将此添加到formarayName=“formThresholds”是的，您前面的评论是这样的。
taskForm['controls']的返回值。配置['controls']。阈值['controls'][0]。get（'name'）
与预期一样：
值：“Duration”
。有趣的是，我得到了name和value属性的空白输入，但这些输入中没有值。我尝试更改了初始化表单的位置，并将数据从NgOnChanges绑定到NgOnInit，结果相同。