Ionic 7 Angular：重开模态框保留多选值及解决NG02200错误

问题说明 #

1. 提交表单前重开模态框，之前选中的子项全部取消，无法保留选择状态；
2. 出现ERROR Error: NG02200: Cannot find a differ supporting object 'Martha,Emily' of type 'string'. NgFor only supports binding to Iterables, such as Arrays.错误，原因是父页面把返回的数组转成了字符串，导致后续*ngFor无法遍历。

解决方案 #

1. 修复NG02200错误：父页面保留数组类型数据 #

父页面中，模态框返回数据时直接赋值数组，不要转为字符串，同时传递已选中列表给模态框：

async openChildModal() {
    const modal = await this.modalCtrl.create({
      component: SelectChildComponent,
      componentProps: {
        // 传递已选中的子项数组，用于模态框初始化选中状态
        'selectedChildren': this.postData.class_children || []
      }
    });
    modal.present();

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

    if (role === 'confirm') {
      // 直接赋值数组，避免转成字符串
      this.postData.class_children = data;
    }
  }

2. 重开模态框时保留选中状态：模态框初始化已选项 #

在模态框组件中添加输入属性接收已选中列表，并在获取数据时设置对应项的选中状态：

import { Input } from '@angular/core';

// ...

// 接收父页面传入的已选中子项firstname数组
@Input() selectedChildren: string[] = [];

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;
          // 生成带checkbox属性的数组，同时根据已选中列表设置初始状态
          this.class_children = this.children.map(v => ({
            ...v,
            checkbox: this.selectedChildren.includes(v.firstname)
          }));
        },
        (error: any) => {
          this.toastService.presentToast('Network Issue.');
        } );
    }
 }

// Return selected values when model is closed
confirm() {
    // 返回选中的firstname数组，逻辑不变
    return this.modalCtrl.dismiss(
      this.class_children.filter(d => d.checkbox === true).map(d => d.firstname), 
      'confirm'
    );
}

3. 模态框HTML无需修改 #

原HTML代码的*ngFor绑定class_children为数组，现在数据类型正确，直接保留即可：

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

关键说明 #

• 始终保持postData.class_children为数组类型，避免转为字符串导致*ngFor遍历错误；
• 模态框初始化时，通过父页面传入的已选中列表批量设置对应项的checkbox状态，实现选择状态保留；
• 提交后编辑场景，只要postData.class_children存储的是选中的firstname数组，重开模态框时会自动加载选中状态。

内容的提问来源于stack exchange，提问作者techwestcoastsfosea