angular - 更新 formArray 上的值
问题描述
所以我有这个设置:
模型:
export class MapDetailModel{
id: number;
lat: number;
lon: number;
alt: number;
long: number;
angle: number;
distance?: number;
pendenza?: number;
}
html:
<div class="element-list">
<form [formGroup]="survey" novalidate (ngSubmit)="onSubmit(survey)" *ngIf="items">
<div formArrayName="sections">
<div class="single-item" *ngFor="let section of getSections(survey); let i = index">
<div [formGroupName]="i">
Lat: <input type="text" formControlName="lat" class="frm-txt">
Lon: <input type="text" formControlName="lon" class="frm-txt">
Long: <input type="text" formControlName="long" class="frm-txt">
Angle: <input type="text" formControlName="angle" class="frm-txt">
a: {{i.angle}}
<a (click)="updateData(i)">Update data</a>
</div>
</div>
</div>
</form>
</div>
ts:
@Component({
//moduleId: module.id,
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'my-info-bar',
templateUrl: 'map-info-bar.component.html',
styleUrls: ['map-info-bar.component.css'],
providers: [],
})
export class MapInfoBarComponent implements OnInit, OnDestroy
{
zoomLevels: any[];
points: MapDetailModel[] = [];
isAlive = true;
survey: FormGroup;
items = false;
constructor(
private mapService: MapService,
private fb: FormBuilder,
private changeDetectorRef: ChangeDetectorRef
){}
ngOnInit() {
this.mapService.singlePointChanged
.takeWhile(() => this.isAlive)
.subscribe( evt => {
if(!!evt && !!this.survey.value.sections[0]){
let elem;
this.points.forEach(el => {
if(el.id == evt.id){
el = evt;
elem = el;
}
});
(<FormArray>this.survey.get('sections')).at(elem.id).patchValue(elem);
this.changeDetectorRef.detectChanges();
}
})
this.mapService.pointsChanged
.takeWhile(() => this.isAlive)
.subscribe( evt => {
if(!!evt){
this.points = evt;
if(!this.items){
this.survey = this.fb.group({
sections: this.fb.array([
this.initSection(0),
]),
});
this.items = true;
} else {
this.addSection(this.points.length - 1);
}
}
});
}
initSection(idx: number) {
return this.fb.group({
lat: [this.points[idx].lat],
lon: [this.points[idx].lon],
long: [this.points[idx].long],
angle: [this.points[idx].angle]
});
}
addSection(idx: number) {
const control = <FormArray>this.survey.get('sections');
control.push(this.initSection(idx));
}
getSections(form) {
return form.controls.sections.controls;
}
updateData(index: number){
const values = this.survey.value.sections[index] as MapDetailModel;
this.mapService.setChangePoint(values);
}
ngOnDestroy(): void {
this.isAlive = false;
}
}
到目前为止,一切工作正常。我正确显示了数据,我很高兴。问题是每当执行此行时:
(<FormArray>this.survey.get('sections')).at(elem.id).patchValue(elem);
它给了我这个错误:
ERROR TypeError: Cannot read property 'patchValue' of undefined
但它的结构是这样的:
那么如何更新 position 处的 formArray 值elem.id
呢?我不明白的是,如果.get
应该找到'section'
数据,怎么可能是未定义的?
谢谢你。
解决方案
TL;DR - 这是因为您在初始化表单之前调用了此操作。
您当前正在做什么-仅在pointsChanged
触发时才初始化表单。在那之前,表单将保持为undefined。
您应该考虑做什么 -在您声明ngOnInit
表单时或立即初始化您的表单,如下所示:
survey: FormGroup = this.fb.group({
sections: this.fb.array([]),
});
pointsChanged
触发时,请考虑使用您patchValue
收到的数据。
推荐阅读
- asp.net-core - 在 ASP.NET Core 应用程序中使用具有 CosmoDB 持久性的 NServiceBus Outbox
- sql - 具有相似数据的两个实体,构建它的最佳方式是什么?
- matplotlib - 有没有办法将 matplotlib 图表保存为 tkinter 中的文件
- .net - 在.NET 中解析作为不带括号的JSON 对象序列的文本(没有根对象)?
- python - 如何进行自定义的 torchvision 变换?
- date - 试图在 Big Query 中获取前几天的数据,而不是过去 24 小时的数据。之前的日期:GETDATE()-1
- debugging - ptrace 卡在 waitpid 上
- javascript - 没有时间的长格式日期
- igor - Igor Pro,如何创建一个连接多个输入文本波且没有重复的文本波
- python - 如何通过函数迭代结构两次,但每次使用不同的参数,而不在 python 中使用两个 for 循环?