根据对象响应显示复选框 Angular [英] display checkbox based on object response Angular
本文介绍了根据对象响应显示复选框 Angular的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想根据对象响应创建动态checkbox，它应该基于这个响应创建多个checkbox:
test.json
<预><代码>[{标题":{"serviceId":"查询服务","productCode":"JPJXXX","transactionId":"cfad2ac7c16XXX"},数据":{项目":[{"offenceType4":"","permSpeed":"110","actSpeed":"123",项目属性":{"属性5":"","attribute4":"VQ3XXX","attribute7":"14.21.00","attribute6":"2018-03-22","attribute1":"XXXXX","attribute3":"XXXXXX",属性2":XXXXXX"},"offenceLoc":"XXXXXX","itemNo":"1","summonDate":"2018-04-02","distCode":"XXXXXX","召唤类型":"2","hbtlOffndr":"N","itemAmount":15000,"itemAttributesCount":7,"summonAmt":"150.00","offenceType1":"48","offenceCode1":"XXXXXX","offenceType2":"","offenceCode2":"","offenceType3":"","类别":"4","offenceCode3":"","offenceCode4":"","respCode":"XXXXXX"},{"offenceType4":"","permSpeed":"110","actSpeed":"123",项目属性":{"属性5":"","attribute4":"XXXXXX","attribute7":"10.13.31","attribute6":"2018-06-16","属性 1":"XXXXXX","attribute3":"XXXXXX",属性2":XXXXXX"},"offenceLoc":"XXXXXX","itemNo":"2","summonDate":"2018-07-23","distCode":"XXXXXX","召唤类型":"2","hbtlOffndr":"N","itemAmount":15000,"itemAttributesCount":7,"summonAmt":"150.00","offenceType1":"48","offenceCode1":"XXXXXX","offenceType2":"","offenceCode2":"","offenceType3":"","类别":"4","offenceCode3":"","offenceCode4":"","respCode":"XXXXXX"}],地位":{代码":""，信息":""},附加属性":{"服务费":0,总":0，"运费":0,"外卡附加费":0,"serviceFeeTax":0,小计":0，"deliveryFeeTax":0},元数据":{计数":2}},地位":{"代码":"200","消息":"好的"}}]我想要的是基于data.items创建的复选框，如果items由2个数组组成，它应该创建2个checkboxes.然后可以提交选定的复选框，它需要 header.transactionId，如果我过滤并且只有 data.items 我怎么能添加 header.transactionId提交时.
我创建了演示 stackblitz 这就是我尝试过的:
Ts 文件
receivedSummons: SummonModel[];selectedSummon:字符串；表格:表格组；构造函数(私人查询商店:查询商店服务，私有表单构建器:FormBuilder){this.form = this.formBuilder.group({收到传票:新 FormArray([], minSelectedCheckboxes(1))});}ngOnInit() {this.getReceivedSummons();}getReceivedSummons() {this.inquiryStore.summons$.subscribe(receivedSummons => {this.receivedSummons = receivedSummons;this.addCheckboxes();})}添加复选框(){this.receivedSummons.map((i) => {const control = new FormControl;(this.form.controls.receivedSummons as FormArray).push(control);});}submitSelectedCheckboxes() {this.selectedSummon = this.form.value.receivedSummons.map((v, i) => (v ? this.receivedSummons[i] : null)).filter(v => v !== null);console.log(this.selectedSummon)}}HTML 文件
我可以使用一些指导和建议来解决这个问题.
解决方案
首先在使用 FormBuilder 时尽量不要实例化 FormControl 或 FormArray> 直接.而是使用 FormBuilder 来做到这一点.
this.form = this.formBuilder.group({收到传票:this.formBuilder.array([])});由于您的 response 是一个 array，您可以获得多个 receivedSummons，其中可以包含多个 data.items.您需要不同的表单结构来解决您的问题.
您的 addCheckboxes 函数可能如下所示.
addCheckboxes() {this.formReceivedSummons.setValue([]);this.receivedSummons.map(x => {const group = this.formBuilder.group({标头:[x.header.transactionId]，项目:this.formBuilder.array([], [minSelectedCheckboxes(1)])});x.data.items.map(y => {(group.get('items') as FormArray).push(this.formBuilder.group({名称:[y.itemNo],已检查:['']}));});this.formReceivedSummons.push(group);});}还要相应地更改 html 文件.
这里使用了 2 个 getter 来获取 receivedSummons 和 items FormArray
get formReceivedSummons() {返回 this.form.get('receivedSummons') 作为 FormArray;}formReceivedSummonsItems(i: number) {返回 (this.formReceivedSummons.controls[i].get('items')) 作为 FormArray;}在这里您可以找到完整的演示.
I want to create dynamic checkbox based on object response,It should create multiple checkbox based on this response:
test.json
[
{
"header":{
"serviceId":"inquiry-service",
"productCode":"JPJXXX",
"transactionId":"cfad2ac7c16XXX"
},
"data":{
"items":[
{
"offenceType4":"",
"permSpeed":"110",
"actSpeed":"123",
"itemAttributes":{
"attribute5":"",
"attribute4":"VQ3XXX",
"attribute7":"14.21.00",
"attribute6":"2018-03-22",
"attribute1":"XXXXX",
"attribute3":"XXXXXX",
"attribute2":"XXXXXX"
},
"offenceLoc":"XXXXXX",
"itemNo":"1",
"summonDate":"2018-04-02",
"distCode":"XXXXXX",
"summonType":"2",
"hbtlOffndr":"N",
"itemAmount":15000,
"itemAttributesCount":7,
"summonAmt":"150.00",
"offenceType1":"48",
"offenceCode1":"XXXXXX",
"offenceType2":"",
"offenceCode2":"",
"offenceType3":"",
"category":"4",
"offenceCode3":"",
"offenceCode4":"",
"respCode":"XXXXXX"
},
{
"offenceType4":"",
"permSpeed":"110",
"actSpeed":"123",
"itemAttributes":{
"attribute5":"",
"attribute4":"XXXXXX",
"attribute7":"10.13.31",
"attribute6":"2018-06-16",
"attribute1":"XXXXXX",
"attribute3":"XXXXXX",
"attribute2":"XXXXXX"
},
"offenceLoc":"XXXXXX",
"itemNo":"2",
"summonDate":"2018-07-23",
"distCode":"XXXXXX",
"summonType":"2",
"hbtlOffndr":"N",
"itemAmount":15000,
"itemAttributesCount":7,
"summonAmt":"150.00",
"offenceType1":"48",
"offenceCode1":"XXXXXX",
"offenceType2":"",
"offenceCode2":"",
"offenceType3":"",
"category":"4",
"offenceCode3":"",
"offenceCode4":"",
"respCode":"XXXXXX"
}
],
"status":{
"code":"",
"message":""
},
"additionalProperties":{
"serviceFee":0,
"total":0,
"deliveryFee":0,
"foreignCardSurcharge":0,
"serviceFeeTax":0,
"subTotal":0,
"deliveryFeeTax":0
},
"metadata":{
"count":2
}
},
"status":{
"code":"200",
"message":"OK"
}
}
]
what I want is checkbox to be created based on data.items if items consist of 2 arrays, it should create 2 checkboxes.then selected checkboxes can be submit and it need header.transactionId, if I filter and only got data.items how could I add header.transactionId when submit.
I had created demo stackblitz and this is what I had tried:
Ts File
receivedSummons: SummonModel[];
selectedSummon: string;
form: FormGroup;
constructor(
private inquiryStore: InquiryStoreService,
private formBuilder: FormBuilder
) {
this.form = this.formBuilder.group({
receivedSummons: new FormArray([], minSelectedCheckboxes(1))
});
}
ngOnInit() {
this.getReceivedSummons();
}
getReceivedSummons() {
this.inquiryStore.summons$.subscribe(receivedSummons => {
this.receivedSummons = receivedSummons;
this.addCheckboxes();
})
}
addCheckboxes() {
this.receivedSummons.map((i) => {
const control = new FormControl;
(this.form.controls.receivedSummons as FormArray).push(control);
});
}
submitSelectedCheckboxes() {
this.selectedSummon = this.form.value.receivedSummons
.map((v, i) => (v ? this.receivedSummons[i] : null))
.filter(v => v !== null);
console.log(this.selectedSummon)
}
}
Html File
<form [formGroup]="form" (ngSubmit)="submitSelectedCheckboxes()">
<label formArrayName="receivedSummons" *ngFor="let summon of form.controls.receivedSummons.controls; let i = index">
<input type="checkbox" [formControlName]="i">
</label>
<div *ngIf="!form.valid">At least one order must be selected</div>
<br>
<button [disabled]="!form.valid">submit</button>
</form>
I could use some guidance and suggestion on how to solve this.
解决方案
First of all when using FormBuilder try not to instantiate FormControl or FormArray directly. Instead use FormBuilder to do so.
this.form = this.formBuilder.group({
receivedSummons: this.formBuilder.array([])
});
As your response is an array you can get multiple receivedSummons which can contain multiple data.items. You need a different form structure to solve your issue.
Your addCheckboxes function might look like this.
addCheckboxes() {
this.formReceivedSummons.setValue([]);
this.receivedSummons.map(x => {
const group = this.formBuilder.group({
header: [x.header.transactionId],
items: this.formBuilder.array([], [minSelectedCheckboxes(1)])
});
x.data.items.map(y => {
(group.get('items') as FormArray).push(this.formBuilder.group({
name: [y.itemNo],
isChecked: ['']
}));
});
this.formReceivedSummons.push(group);
});
}
Also change the html file accordingly.
<form [formGroup]="form" (ngSubmit)="submitSelectedCheckboxes()">
<ng-container formArrayName="receivedSummons" *ngFor="let summon of formReceivedSummons.controls; let i = index">
<ng-container [formGroup]="summon">
<p>{{summon.value.header}}</p>
<ng-container formArrayName="items" *ngFor="let item of formReceivedSummonsItems(i).controls; let j = index">
<ng-container [formGroup]="item">
<input type="checkbox" formControlName="isChecked"> {{item.value.name}}
</ng-container>
</ng-container>
</ng-container>
<div *ngIf="!summon.valid">At least one order must be selected</div>
</ng-container>
<br>
<button [disabled]="!form.valid">submit</button>
</form>
Here 2 getters were used to get the receivedSummons and items FormArray
get formReceivedSummons() {
return this.form.get('receivedSummons') as FormArray;
}
formReceivedSummonsItems(i: number) {
return (this.formReceivedSummons.controls[i].get('items')) as FormArray;
}
Here you can find the full demo.
这篇关于根据对象响应显示复选框 Angular的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
