Javascript 基于对象响应角度显示复选框

我想基于对象响应创建动态复选框，它应该基于此响应创建多个复选框：

test.json

我想要的是基于数据创建复选框。项目如果项目由2个数组组成，它应该创建2个复选框。然后可以提交选中的复选框，并且需要header.transactionId，如果我筛选并仅获取数据。项目提交时如何添加header.transactionId

我已经创建了演示，这是我尝试过的：

Ts文件

Html文件

关于如何解决这个问题，我可以提供一些指导和建议。

首先，在使用FormBuilder时，尽量不要直接实例化FormControl或FormArray。而是使用FormBuilder来执行此操作

this.form = this.formBuilder.group({
    receivedSummons: this.formBuilder.array([])
});

由于您的响应是一个数组，因此可以获得多个receivedSummons，其中可以包含多个data.items。您需要一个不同的表单结构来解决您的问题

AddCheckBox函数可能如下所示

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);
    });
}

也相应地更改html文件

<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>

您可以找到完整的演示。

使用FormBuilder时，首先不要直接实例化FormControl或FormArray。而是使用FormBuilder来执行此操作

this.form = this.formBuilder.group({
    receivedSummons: this.formBuilder.array([])
});

由于您的响应是一个数组，因此可以获得多个receivedSummons，其中可以包含多个data.items。您需要一个不同的表单结构来解决您的问题

AddCheckBox函数可能如下所示

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);
    });
}

也相应地更改html文件

<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>

---

您可以找到完整的演示。

我看不到您在StackBlitz中发布的代码。@nash11但是查询响应folderI中仍然有代码，我不太清楚您在这里想要实现什么。在您的演示中，您有一个输入，但无论您在其中键入什么，只要它有任何4个数字，您可以提交，您只是显示复选框。您希望复选框的值到底是多少？在我输入4个数字后，我得到了response obj，使用Behavior Subject将其发送到inquiry response，基于response obj data.items，我希望绑定复选框，如果data.items length=2，将有一个2个复选框所以我还需要header.transactionId和复选框以发送到另一个组件。我看不到您在StackBlitz中发布的代码。@nash11但查询响应folderI中仍有代码我不太清楚您在这里试图实现什么。在您的演示中，您有一个输入，但无论您在其中键入什么，只要它有任何4个数字，您可以提交，您只是显示复选框。您希望复选框的值到底是多少？在我输入4个数字后，我得到了response obj，使用Behavior Subject将其发送到inquiry response，基于response obj data.items，我希望绑定复选框，如果data.items length=2，将有2个复选框，因此我还需要header.transactionId和复选框以发送到另一个组件

get formReceivedSummons() {
    return this.form.get('receivedSummons') as FormArray;
}

formReceivedSummonsItems(i: number) {
    return (this.formReceivedSummons.controls[i].get('items')) as FormArray;
}