Angular 如何创建动态扩展复选框列表以及如何捕获 API 的价值？

Question

我在扩展标题下设计了动态复选框列表，因为它是动态的，所以如何动态获取所有复选框值并将其发送到 API？

PS 如何从API循环显示这样的动态列表？我对 Angular 和 Tyepscript 很陌生，所以我需要一些帮助。

下面是API的响应，我如何根据categoryID对它们进行分组？

{

"code": "200",

"message": "Success",

"data": [

    {

        "categoryId": "ADMDSHB",

        "accessId": "ADPRATE",

        "catAccessStatus": "A",

        "createdBy": null,

        "updatedBy": null,

        "createdAt": "2020-04-09T09:22:16.000Z",

        "updatedAt": "2020-04-09T09:22:16.000Z",

        "BoRefCategory": {

            "categoryId": "ADMDSHB",

            "categoryDesc": "Dashboard-admin"

        },

        "BoRefAccess": {

            "accessId": "ADPRATE",

            "accessDesc": "Adoption Rate"

        }

    },

    {

        "categoryId": "ADMDSHB",

        "accessId": "AGTMLR",

        "catAccessStatus": "A",

        "createdBy": null,

        "updatedBy": null,

        "createdAt": "2020-04-09T09:22:33.000Z",

        "updatedAt": "2020-04-09T09:22:33.000Z",

        "BoRefCategory": {

            "categoryId": "ADMDSHB",

            "categoryDesc": "Dashboard-admin"

        },

        "BoRefAccess": {

            "accessId": "AGTMLR",

            "accessDesc": "Agent MLR"

        }

    },

    {

        "categoryId": "ADMDSHB",

        "accessId": "AGTMLR",

        "catAccessStatus": "A",

        "createdBy": null,

        "updatedBy": null,

        "createdAt": "2020-04-09T12:07:44.000Z",

        "updatedAt": "2020-04-09T12:07:44.000Z",

        "BoRefCategory": {

            "categoryId": "ADMDSHB",

            "categoryDesc": "Dashboard-admin"

        },

        "BoRefAccess": {

            "accessId": "AGTMLR",

            "accessDesc": "Agent MLR"

        }

    }

]

}

Answer 1

您好，您可以将复选框分配给 ts 文件中具有名称和值的对象数组，如下所示：&nbsp;selectedBoxes = [&nbsp; &nbsp; {&nbsp; name: "Adoption Rate",&nbsp; status: true},{&nbsp; name: "Agent MLR",&nbsp; status: false},{&nbsp; name: "Agent Test",&nbsp; status: false}]onRefresh(){&nbsp; console.log(this.selectedBoxes);}然后在你的html中：<div *ngFor="let box of selectedBoxes"><input type="checkbox" [(ngModel)]="box.status" value="test" (ngModelChange)="onRefresh()">&nbsp;{{box.name}} </div>现在，当您检查值时，您可以看到 onRefresh 函数中所做的更改。/// 更新以获取来自 api 的示例响应：&nbsp; selectedBoxes = [ ];&nbsp; ngOnInit() {&nbsp; for( let i in this.response.data){&nbsp; &nbsp;this.selectedBoxes.push({name: this.response.data[i].BoRefAccess.accessDesc, status: false})&nbsp; }&nbsp; }