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

Question

我在扩展标题下设计了一个动态复选框列表，因为它是动态的，所以我怎样才能动态获取所有复选框值并发送到 API？

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

以下是 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 函数所做的更改。

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

  selectedBoxes = [ ];

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