我从GraphQL API得到类似的响应：
{
metrics: [
0: {
metric: { id: 1, name: 'xMetric', category: { id: 1, name: 'xCat'}},
room: { id: 1, name: 'xRoom'}
},
... // It continues with metric objects
],
checks: [
0: {
checks: { id: 1, name: 'xCheck', category: { id: 1, name: 'xCat'}},
room: { id: 1, name: 'xRoom'}
},
... // It continues with checks
]
}
我需要为每个房间生成表单字段，每个房间将包含多个类别。
我所做的是按房间分组，然后过滤房间数组以使其不包含lodash重复项，并对每个房间的类别进行类似操作。然后，我生成了每个类别的字段，用户必须在其中编写输入，以便我们以后保存。
我需要生成的是基于房间数量的多个表格，然后是基于房间的多个类别，然后是基于这些类别的多个字段。
这是我遵循的模式：https://material.angular.io/components/stepper/examples。
但是我似乎无法正常工作的是正确生成了许多表格。
这是我动态生成具有多个动态字段的表单的方式：
this.ourXParameters$.subscribe(params => {
this.siteSubsystems = _.map(params, subsystem => subsystem.name);
_.forEach(siteParametersPerSubsystem, subsystem => {
const group = this.formBuilder.group({});
_.forEach(subsystem.parameters, parameter => {
const control = this.formBuilder.control(null, parameter.mandatory ? Validators.required : null);
// add control in the control group of the form and keep an index via parameter id (east access later)
group.addControl(`parameter_${parameter.id}`, control);
_.set(this._controlsPerParameterId, parameter.id, control);
});
(<FormArray>this.xForm.controls['subsystems']).push(group);
});
});
在我的情况下，它不起作用，因为我没有一个表单，但是根据房间的数量，我可以有多个表单，而且我也没有定义控件名称。