角度添加/编辑表单-在ngFor中从跨度中丢失数据
角度添加/编辑表单-在ngFor中从跨度中丢失数据
提问于 2022-04-14 14:13:43
因此，我有一个添加/编辑屏幕，我需要提交一个列表。(在其他数据中)用户将需要检查这个特定数据的2-3复选框，并且保存的记录将有多个选项映射。
html看起来是这样的。
<div class="col-sm-6 form-group">
<label>P</label>
<div class="form-control details">
<div class="row" formArrayName="pay" *ngFor="let item of payArray.controls; let i = index;">
<div class="col-12" [formGroupName]="i">
<input type="checkbox" formControlName="selected" class="custom-checkbox-input">
<span class="m-l-5" title="{{ item.Id }}">{{item.title}}xy</span>
</div>
</div>
</div>
</div>在.ts方面，我称之为onInit：
getPay() {
this.PayDS.getItems(true).subscribe(result => {
this.ddlPay = result.list || [];
this.payArray = this.form.get('pay') as FormArray;
this.pay.clear();
this.ddlPay.forEach(item => {
console.log('item.Id = ' + item.Id + ', item.title = ' + item.title);
this.payArray.push(this.formBuilder.group({
Id: new FormControl(item.Id),
title: new FormControl(item.title),
selected: new FormControl({ value: item.selected })
}));
});
});
}Console.log()正在按需要播放所有记录，Id和标题也是如此。看起来很完美。
在屏幕上，我有相同数量的记录(11)，都带有复选框。
这个问题？所有记录都是空的，没有文本，也没有标题，只有11个复选框没有任何文本。
我试过的是：
- 它确实显示了xy，它位于{item.title}}xy旁边--这只是为了测试没有缺少的类或类似于
的任何问题。
- 它没有我在提示(“
- ”)中添加的id来测试它。这就是Chrome
<span class="m-l-5" title=""> xy</span>
中元素选项卡中的样子
- I试图将{{ item }而不是{{item.title}}放到对象中，然后它显示对象对象，因此我猜测在那里有正确的对象
。
为什么我什么都没看到？我做错了什么？为什么控制台或任何地方都没有错误？我还能做什么呢？
回答 3
Stack Overflow用户
回答已采纳
发布于 2022-04-14 14:36:20
<span class="m-l-5">{{item.controls.title.value}}</span>Stack Overflow用户
发布于 2022-04-14 14:18:43
创建一个具有窗体控件(即Id和title )的窗体组。
这些是窗体控件，而不是值。
这意味着，要显示它们，您需要这样做：
<span class="m-l-5" title="{{ item.Id.value }}">{{item.title.value}}</span>由于您没有在selected中提供formBuilder.group控件，所以无法绑定到它。试着提供它，使它发挥作用。
而且，它应该是
<div class="col-12" [formGroup]="payArray.controls[i]">Stack Overflow用户
发布于 2022-04-14 14:20:03
您的.subscribe()不触发更改检测，因此必须手动执行。
将private cd:ChangeDetectorRef添加到constructor中，并在forEach()循环之后添加this.cd.markForCheck();
getPay() {
this.PayDS.getItems(true).subscribe(result => {
...
this.ddlPay.forEach(item => {
...
});
this.cd.markForCheck();
});
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71873062
复制相关文章
相似问题
腾讯云开发者
