Ionic2带复选框

Question

我可能听起来很老，但我是离子2的新手。我在离子2中写了一个代码用于复选框，它运行良好，但我如何检索复选框的计数 以下是我的代码。

checklist.ts代码

<div class="row">
    <div class="col-xs-push-12 col-md-12">
        Col 1
    </div>
    <div class="col-xs-pull-12 col-md-12">
        Col 2
    </div>
</div>

checklist.html

 import { Component } from '@angular/core';
import { NavController, NavParams, Alert } from 'ionic-angular';

@Component({
  templateUrl: 'build/pages/checklist/checklist.html',
})

export class ChecklistPage {

  checklist:any;

  constructor(public nav: NavController, public navParams: NavParams) {
    this.checklist = this.navParams.get('checklist');
  }

  addItem(): void {

    let prompt = Alert.create({
      title: 'Add Item',
      message: 'Enter the name of the task for this checklist below:',
      inputs:[
        {
          name: 'name'
        }
      ],
      buttons:[
        {
          text: 'Cancel'
        },
        {
          text: 'Save',
          handler: data => {
            this.checklist.addItem(data.name);
          }
        }
      ]
    });

    this.nav.present(prompt);

  }

  toggleItem(item): void {

        this.checklist.toggleItem(item);
  }

  removeItem(item): void {

    this.checklist.removeItem(item);

  }

  renameItem(item): void {

    let prompt = Alert.create({
      title: 'Rename Item',
      message: 'Enter the new name of the task for this checklist below:',
      inputs: [
        {
          name: 'name'
        }
      ],
      buttons: [
        {
          text: 'Cancel'
        },
        {
          text: 'Save',
          handler: data => {
            this.checklist.renameItem(item,data.name);
          }
        }
      ]
    });

    this.nav.present(prompt);

  }

   checkallItems(): void {

    this.checklist.items.forEach((item) => {
      if(!item.checked){
        this.checklist.toggleItem(item);
      }
    });

  }
  uncheckItems(): void {

    this.checklist.items.forEach((item) => {
      if(item.checked){
        this.checklist.toggleItem(item);
      }
    });


  }

    }

Answer 1

您可以在ChecklistPage中添加一个方法，如下所示：

public getItemsCount(): number {
    let count= 0;
    for(let i=0; i<this.checklist.items.length; i++) {
        if(this.checklist.items[i].checked){
            count++;
        }    
    }
    return count;
}

或遵循checkallItems()方法：

public getItemsCount(): number {
    let count= 0;
    this.checklist.items.forEach((item) => {
        if(item.checked){
            count++;
        }
    });
    return count;
}

然后在你看来：

<ion-title>{{checklist.title}} #{{getItemsCount()}}/{{checklist.items.length}}</ion-title>