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

Question

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

P.S。如何从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文件中将检查框分配给具有名称和值的对象数组：

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