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 文件中具有名称和值的对象数组，如下所示：

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

  }

  }