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

Question

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

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

下面是API的回复，如何根据类别ID对它们进行分组？

{
"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 文件中将您的复选框分配给具有如下名称和值的对象数组：

 selectedBoxes = [    {
  name: "Adoption Rate",
  status: true
},
{
  name: "Agent MLR",
  status: false
},
{
  name: "Agent Test",
  status: false
}]
onRefresh(){
  console.log(this.selectedBoxes);
}

然后在你的 html 中：

<div *ngFor="let box of selectedBoxes">
<input type="checkbox" [(ngModel)]="box.status" value="test" (ngModelChange)="onRefresh()"> 
{{box.name}} </div>

现在当您检查一个值时，您可以看到在 onRefresh 函数中所做的更改。

/// 更新以使用示例响应从 api 获取：

  selectedBoxes = [ ];

  ngOnInit() {
  for( let i in this.response.data){
   this.selectedBoxes.push({name: this.response.data[i].BoRefAccess.accessDesc, status: false})
  }
  }

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

Angular How to create a dynamic expansion checkbox list and how to capture value for API?

html

arrays

checkboxlist

typescript

angular