Ionic 2：点击按钮获取复选框选中邮箱ID的实现方法

嘿，刚接触Ionic 2遇到这种问题太正常啦，我来一步步帮你搞定～

首先，你已经在HTML里用[(ngModel)]="mail.checked"给复选框做了双向绑定，这一步是对的！接下来只需要在TS文件里做些处理，就能轻松拿到选中的邮箱ID啦：

第一步：确保你的邮箱数据包含checked属性 #

在你的页面TS文件（比如sendmail.ts）里，定义custEmailIDs的时候，要给每个邮箱对象加上checked属性，默认设为false（表示初始未选中）：

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

@Component({
  selector: 'page-sendmail',
  templateUrl: 'sendmail.html',
})
export class SendmailPage {
  // 模拟你的邮箱数据，记得加checked属性
  custEmailIDs = [
    { Email_ID: 'client1@test.com', checked: false },
    { Email_ID: 'client2@test.com', checked: false },
    // 更多邮箱数据...
  ];
  selectedEmails: string[] = []; // 用来存储选中的邮箱ID

  constructor() {}

  // 定义获取选中邮箱的方法
  getSelectedEmails() {
    // 筛选出checked为true的邮箱，提取Email_ID存入数组
    this.selectedEmails = this.custEmailIDs
      .filter(mailItem => mailItem.checked)
      .map(mailItem => mailItem.Email_ID);
    
    // 可以打印出来验证结果，后续就用这个数组做发邮件操作啦
    console.log('选中的邮箱列表：', this.selectedEmails);
  }
}

第二步：给按钮绑定点击事件 #

修改你的sendmail.html，给按钮加上(click)事件，调用上面写的getSelectedEmails方法：

<div>
  <ion-grid>
    <ion-row wrap class="gridHeading">
      <ion-col col-2 class="gridHeading" align="center"></ion-col>
      <ion-col col-10 class="gridHeading" align="center">CLIENT EMAIL</ion-col>
    </ion-row>
    <ion-row wrap *ngFor="let mail of custEmailIDs" class="gridCol">
      <ion-col col-2 class="gridCol">
        <ion-checkbox [(ngModel)]="mail.checked"></ion-checkbox>
      </ion-col>
      <ion-col col-10 class="gridCol">{{ mail.Email_ID }}</ion-col>
    </ion-row>
  </ion-grid>
  <!-- 绑定点击事件 -->
  <button ion-button full color="other" (click)="getSelectedEmails()">Send</button>
</div>

关键点说明 #

• 双向绑定[(ngModel)]="mail.checked"会自动同步复选框的选中状态到mail对象的checked属性里
• filter方法用来筛选出所有被选中（checked: true）的邮箱项，map方法把这些项转换成纯邮箱ID的数组
• 点击Send按钮后，selectedEmails数组里就存着所有选中的邮箱ID，你可以直接用这个数组做后续的发邮件操作

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