Ionic中循环生成的ion-select如何根据指定数组预设选中项

1. 调整TypeScript逻辑 #

你不需要额外声明isSelected变量控制选中状态，Ionic的ion-select在多选模式下，会自动根据[(ngModel)]绑定的数组内容匹配对应value的选项为选中状态，只需要在页面初始化时给selectedCompanies赋值为已拉黑的公司列表即可。
修改后的代码如下：

import { Component, OnInit, Input } from '@angular/core';
import { ModalController} from '@ionic/angular';
import { LoginService } from 'src/app/login.service';

@Component({
  selector: 'edit-blocked',
  templateUrl: './edit-blocked.page.html',
  styleUrls: ['./edit-blocked.page.scss'],
})
export class EditBlockedPage implements OnInit {
  user = this.loginSrvc.user;
  blocked = this.loginSrvc.editNumber;
  blockedToggle: any;
  minDate = new Date().toISOString();
  selectedCompanies = [];

  constructor(private modalController: ModalController, private loginSrvc: LoginService) {}

  ngOnInit() {
    // 初始化默认选中的拉黑公司
    // 若你的blocked是数组类型，需按实际结构取对应对象的companies字段，比如this.blocked[0].companies
    this.selectedCompanies = [...this.blocked.companies];
  }
}

2. 简化HTML代码 #

删除ion-select-option上的selected属性绑定，原有绑定的全局isSelected变量会导致所有选项选中状态同步，完全不需要手动控制该属性：

<ion-select multiple="true" [(ngModel)]="selectedCompanies" class="selectModal" placeholder="Add one or more companies" text="Hello" okText="Ok" cancelText="Dismiss">
    <ion-select-option *ngFor="let company of user.company; let i=index" value="{{company.company_name}}">{{company.company_name}}</ion-select-option>
</ion-select>

ion-select的多选模式会自动将ngModel绑定数组中的值，和所有ion-select-option的value做匹配，匹配成功的选项自动标记为选中状态，无需手动操作selected属性，后续用户修改选中项时，selectedCompanies数组也会同步更新，和你之前的正常提交逻辑完全兼容。

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