Question

我有一个包含一些元素的数组，这些元素会发生变化。我需要通过获取这些值来创建表单。如果用户对表单进行了一些更改，还需要更新数组中的这些字段。

我尝试通过在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>&nbsp;&nbsp;
                    <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，我不知道如何获取和设置值。请帮忙！

根据arraySize，在ngFor中定义不同的formControlName并根据用户输入更新这些字段

0 个答案: