我有一个包含一些元素的数组,这些元素会发生变化。我需要通过获取这些值来创建表单。如果用户对表单进行了一些更改,还需要更新数组中的这些字段。
我尝试通过在ngFor中提供索引并使用它来定义不同的FormControlName
数组
"Sensor": [
{
"ID": "FEDBFBAB62B02275-00",
"Name": "Apt-4E",
"TargetTemp": 25,
"Battery": 95,
"SpaceAvg": False,
"Building": True
},
{
"ID": "FEDBFBAB62B02276-00",
"Name": "Apt-5E",
"TargetTemp": 26,
"Battery": 55,
"SpaceAvg": False,
"Building": True
}
]
.html文件
<tr *ngFor="let data of sensor;let idx=index">
<td>{{ data.ID }}</td>
<td><input type="text" value={{data.Name}} formControlName="name{{idx+1}}"></td>
<td><input type="radio" id="test3" formControlName="location{{idx+1}}" value="true" [checked]="location1">
<label for="test3">Valve 1</label>
<input type="radio" id="test4" formControlName="location{{idx+1}}" value="false" [checked]="!location1">
<label for="test4">Valve 2</label>
</td>
<td><input type="number" value={{data.TargetTemp}} formControlName="spaceAvg{{idx+1}}"></td>
</tr>
.ts文件
export class Screen7Component implements OnInit{
sensor: any[];
id1 : string;
id2 : string;
name1 : string;
name2 : string;
location1 : boolean;
location2 : boolean;
spaceAvg1 : number;
spaceAvg2 : number;
Screen7Config = new FormGroup({
name1 : new FormControl(''),
name2 : new FormControl(''),
location1 : new FormControl(''),
location2 : new FormControl(''),
spaceAvg1 : new FormControl(''),
spaceAvg2 : new FormControl('')
});
}
但是问题是,我需要在.ts文件中显式声明变量名,但是如果数组的内容是动态的,则不能这样做。而且,当我们给出
[checked] =“ {{location {{idx + 1}}”时,[checked]属性也不起作用。
我认为我们需要使用FormArray,但是如果不显式定义formControls,我不知道如何获取和设置值。请帮忙!