Angular Как создать список флажков динамического расширения c и как получить значение для API? - PullRequest
Новая
       30

Angular Как создать список флажков динамического расширения c и как получить значение для API?

0 голосов
/ 09 апреля 2020

У меня есть дизайн списка флажков динамического c под заголовком расширения, так как он является динамическим c, так как я могу получить все значения флажка динамически и отправить в API?

PS Как l oop из API для отображения такого динамического списка c? Я очень плохо знаком с Angular и Tyepscript, поэтому мне нужна помощь. enter image description here

Ниже приведен ответ от 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"
        }
    }
]

}

1 Ответ

0 голосов
/ 09 апреля 2020

Здравствуйте, вы можете назначить свои чекбоксы массиву объектов с именем и значением, как это в вашем файле 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>

Теперь, когда вы проверяете значение, вы можете видеть изменения, сделанные в функции onRefre sh.

/// Обновление для получения от api с примером ответа: 

  selectedBoxes = [ ];

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