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

Posted 2023-03-13

【中文标题】如何在复选框中显示数组元素 - 离子

【英文标题】：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) // 呃，出错了！ ); */ 其他

【参考方案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>