【问题标题】:How to set Ngmodel for a nested ngFor ion-checkbox?如何为嵌套的 ngFor 离子复选框设置 Ngmodel?
【发布时间】:2018-09-10 17:27:03
【问题描述】:

我有一个嵌套的 ngFor Checkbox.. 我只需要设置 NgModel 来检查复选框是否被选中??

<ion-item-group *ngFor="let patient of Patients; let i= index">
<ion-item-divider color="light">{{patient.conditionGroup}}</ion-item-divider>
<ion-item *ngFor="let condition of patient.conditions; let j= index">
<ion-label>{{condition}}</ion-label>
<ion-checkbox id="{{condition}}" [(ngModel)]="checkStatus[i][j]" (ionChange)="mylist(i,j,condition)" color="danger"></ion-checkbox>
</ion-item>
</ion-item-group>

我的控制器是这样的..

  {
    this.checkStatus=[];
    this.Patients = [];

    for(var s=0;s<this.Patients.length;s++)
    {this.checkStatus[s]=[];}
    }

How do i check if the checkbox is checked.. error
    ERROR TypeError: Cannot read property '0' of undefined

患者

[
      {
        "conditionGroup": "Family Care",
        "conditions": [
          "Head",
          "Poisoning",
          "Stroke"
        ]
      }
]

在 myList() 中,我需要将选中的选项推送到数组中..

【问题讨论】:

  • 请清楚地描述你的工作..
  • 更新对象数组的患者 .... 并更新 mylist 函数
  • 感谢回复
  • 欢迎@karthika
  • 你需要将条件存储在数组中或者还需要索引......

标签: angular ionic3 ngfor ion-checkbox


【解决方案1】:

控制器代码

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

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  checkStatus = [];
  Patients = [];

  constructor(public navCtrl: NavController) {

    this.initPatients();
  }

  initPatients(){
     this.Patients = [
      {
        "conditionGroup": "Family Care",
        "conditions": [
          "Head",
          "Poisoning",
          "Stroke"
        ]
      },
      {
        "conditionGroup": "Family Care",
        "conditions": [
          "Head",
          "Poisoning",
          "Stroke"
        ]
      },
      {
        "conditionGroup": "Family Care",
        "conditions": [
          "Head",
          "Poisoning",
          "Stroke"
        ]
      }
    ];
     this.updateStatus();
  }
  updateStatus() {
    for (var s = 0; s < this.Patients.length; s++)
    { this.checkStatus[s] = []; }
  }



}

HTML 代码

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

<ion-content padding>
 <ion-item-group *ngFor="let patient of Patients; let i= index">
<ion-item-divider color="light">{{patient.conditionGroup}}</ion-item-divider>
<ion-item *ngFor="let condition of patient.conditions; let j= index">
<ion-label>{{condition}}</ion-label>
<ion-checkbox id="{{condition}}" [(ngModel)]="checkStatus[i][j]" (ionChange)="mylist(i,j,condition)" color="danger"></ion-checkbox>
</ion-item>
</ion-item-group>
</ion-content>

【讨论】:

  • 能够加载患者数据,并且页面中显示复选框,但我如何获取已选中的复选框
  • 您需要将选中的项目保存在数组中或使用状态检查更新来更新患者数组stackblitz.com/edit/ionic-fiznjd
  • 谢谢你,我需要将所有选中的项目存储在一个数组中
猜你喜欢
  • 1970-01-01
  • 2019-02-06
  • 2021-06-02
  • 1970-01-01
  • 2018-11-11
  • 2022-09-22
  • 2017-01-06
  • 2016-07-27
  • 2018-04-16
相关资源
最近更新 更多