如何在复选框中显示数组元素 - 离子答案

【问题标题】：how to display array element within check boxes - ionic如何在复选框中显示数组元素 - 离子
【发布时间】：2018-05-08 21:49:42
【问题描述】：

我有一个简单的问题，我正在将数据从 firebase 检索到数组列表中。我想用复选框显示这个数组。你能帮忙吗？ firebase 的列表数组（任务）已准备就绪，只是试图在复选框中显示它.. “event.target”类型中不存在“checked”属性

这里是ts代码：

let currentUid=this.afAuth.auth.currentUser.uid.valueOf();
    this.items = afDB.list('ToDoList/'+currentUid).valueChanges();
    this.items.subscribe((data)=>{
      console.log(""+ data);
      this.tasks = data;

checked($event){
    if(event.target.checked==true)
    {

    }
    else
    {

    }
  }

html代码：

<ion-item class="text" *ngFor="let task of tasks">
          <input type="checkbox" (change)="checked($event,task)"/>

【问题讨论】：

向我们展示您的 JSON 结构。确保您有一些属性来检查选择状态。例如。 [{名称：“香肠”，检查：真}]；试试这个示例stackblitz.com/edit/ionic-checkbox-radio
checked(event,task){ if(event.target.checked==true) { console.log(task); /*var delItems = this.afDB.list('ToDoList/'+this.currentUid); // 删除文件 delItems.delete().then(function() { // 文件删除成功 }).catch(function(error) { // 呃，出错了！ }); */ } 其他 { } }

标签： javascript angular typescript ionic2 ionic3

【解决方案1】：

您已经非常接近了，您只需将 change 事件绑定更改为 ionChange (docs) 并处理 $event 有点不同。

请查看此 Stackblitz project 的 HomePage 以获取工作演示。

组件：

@Component({...})
export class HomePage {

  public tasks = [
    "Task 1",
    "Task 2",
    "Task 3"
  ];

  constructor(public navCtrl: NavController) {}

  checked(event: any, task: any){
    const isChecked = event.checked;

    // Here you can include your custom logic
    // to handle what happens when the checkbox
    // is checked or unchecked :)

    if(isChecked) {
      console.log(`The task ${task} is checked!`)

      // ...
      // ...
    } else {
      console.log(`The task ${task} is unchecked!`)

      // ...
      // ...
    }
  }
}

请注意，该方法同时接收event 和选定的task，您可以使用event.checked 来获取复选框的状态。

查看：

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <!-- ... -->

  <ion-list>
    <ion-item *ngFor="let task of tasks">
      <ion-label>{{ task }}</ion-label>
      <ion-checkbox (ionChange)="checked($event, task)"></ion-checkbox>
    </ion-item>
  </ion-list>
</ion-content>

【讨论】：