How to retain the values in a modal that were selected when the modal is reopened last or come from the database

Ionic Framework Ionic Angular
1

I have form with a modal that is used to select multiple children in a class. I can successfully select multiple children and return them to the parent page. However, if I reopen the modal before submitting the form all values are unselected. How do I select the values that were selected when I initially opened the modal. I think that I will encounter a similar issue even after I submit the form and then want to edit it. The error I see is:

ERROR Error: NG02200: Cannot find a differ supporting object ‘Martha,Emily’ of type ‘string’. NgFor only supports binding to Iterables, such as Arrays. Find more at

Below is my code:

In the parent page:

async openChildModal() {
    const modal = await this.modalCtrl.create({
      component: SelectChildComponent,
      componentProps: {
        'class_children': this.postData.class_children
      }
    });
    modal.present();

    const { data, role } = await modal.onWillDismiss();

    if (role === 'confirm') {
      this.postData.class_children = `${data}`;
    }
  }

In the modal:

class_children: any = [];

children: any = [];

// called from ngOnInit() 

getFeedData() {
    this.postData.token = this.authUser.token;
        if (this.postData.token) {
      this.childService.feedData(this.postData).subscribe(
        (res: any) => {
          this.children = res;
          this.class_children = this.children.map(v => Object.assign(v, {checkbox: false}));
        },
        (error: any) => {
          this.toastService.presentToast('Network Issue.');
        } );
    }

 }

// Return selected values when model is closed
  confirm() {
        return this.modalCtrl.dismiss(this.class_children.filter(d => d.checkbox === true).map(d => d.firstname), 'confirm');
  }

In my modal HTML file


<ion-list>
<div *ngFor="let item of class_children">
 <ion-item lines="none" class="ion-margin">
         <ion-checkbox justify="start" labelPlacement="end" name="{{item.firstname}}" id="{{item.firstname}}" value="{{item.firstname}}" [(ngModel)]="item.checkbox" >{{item.firstname}}</ion-checkbox>
</ion-item>
 </div>
</ion-list>
2

you need to pass the values back to the modal and then set the values of the check box using ngmodel.

3 
componentProps: {
        'class_children': this.postData.class_children
      }

componentProps already does that. These are the multi-select options. I did the same with simple radio buttons for a different modal on the same for and it worked. But not for the multi-select.