使用 ngModel 获取动态复选框的值答案

【问题标题】：Getting the values of dynamic checkboxes with ngModel使用 ngModel 获取动态复选框的值
【发布时间】：2018-09-15 06:05:47
【问题描述】：

我有这种结构的数据库

  "questionnaire": {
  "id": "5ac5f074867d190bc471dc59",
  "name": "Diabetes Questionnaire Test"
  "item": [
    {
      "prefix": "1",
      "text": "Do you have family history of diabetes?",
      "Questiontype": "choice",
      "options": [
        {
          "value": "Yes",
          "checked": false
        },
        {
          "value": "No",
          "checked": false
        },
        {
          "value": "I Don't know",
          "checked": false
        }
      ]
    },
    {
      "prefix": "2",
      "text": "Are you hypertensive?",
      "Questiontype": "choice",
      "options": [
        {
          "value": "Yes",
          "checked": false
        },
        {
          "value": "No",
          "checked": false
        },
        {
          "value": "I Don't Know",
          "checked": false
        }
      ]
    },

在我的 html 代码中，我以这种方式在复选框中显示选项。我正在尝试获取已在数组或对象中检查的选项的值。请问我该怎么做？

    <ion-item *ngFor="let option of item.options;">
    <ion-label>{{option.value}}</ion-label><ion-checkbox [(ngModel)]="option.checked" name="option.checked"></ion-checkbox>
   </ion-item>

请问我怎样才能得到已检查的选项的值？

【问题讨论】：

请参考 stack blitz demo link 并请说明您需要哪种格式的检查值作为结果
我需要将值作为结果放入一个数组中，以便将其发送到另一个对象。非常感谢
我认为您需要一个单选按钮而不是复选框，因为需要正确选择一个选项。
我已经发布了一个答案，请检查并回复，也不要忘记检查堆栈闪电战链接

标签： angular ionic-framework angular-ngmodel angular-forms

【解决方案1】：

    //Sample database structure
      datas = 
    { "questionnaire": { "id": "5ac5f074867d190bc471dc59", "name": "Diabetes Questionnaire Test", "item": [ { "prefix": "1", "text": "Do you have family history of diabetes?", "Questiontype": "choice", "options": [ { "value": "Yes", "checked": true }, { "value": "No", "checked": false }, { "value": "I Don't know", "checked": false } ] }, { "prefix": "2", "text": "Are you hypertensive?", "Questiontype": "choice", "options": [ { "value": "Yes", "checked": false }, { "value": "No", "checked": false }, { "value": "I Don't Know", "checked": false } ] } ] } };


    Set the checked input property to the value like this using your datas
    <div *ngFor="let data of datas.questionnaire.item;">
      <p>
        <input type="checkbox" [checked]="data.options[0].checked">
      </p>
    </div>

【讨论】：

请问我在哪里可以找到检查的数据。这是我的问题。我一个控制台.log 它并在控制台的数组中查看它

【解决方案2】：

通过 ion-checkbox 中的 ionChange 函数可以创建一个新的答案数组

HTML

    <ion-list *ngFor="let item of data.questionnaire.item;let i = index">
        <ion-item *ngFor="let option of item.options;let j =index">
            <ion-label>{{option.value}}</ion-label>
            <ion-checkbox [(ngModel)]="option.checked" (ionChange)="updateAnswer(i,j,option.value,option.checked)"></ion-checkbox>
        </ion-item>
    </ion-list>

  {{answer | json}}

TypeScript

data: any;
  answer:any[] = [];
  constructor(public navCtrl: NavController) {
    this.data = {"questionnaire": {
        "id": "5ac5f074867d190bc471dc59",
        "name": "Diabetes Questionnaire Test",
      "item": [
        {
          "prefix": "1",
          "text": "Do you have family history of diabetes?",
          "Questiontype": "choice",
          "options": [
            {
              "value": "Yes",
              "checked": false
            },
            {
              "value": "No",
              "checked": false
            },
            {
              "value": "I Don't know",
              "checked": false
            }
          ]
        },
        {
          "prefix": "2",
          "text": "Are you hypertensive?",
          "Questiontype": "choice",
          "options": [
            {
              "value": "Yes",
              "checked": false
            },
            {
              "value": "No",
              "checked": false
            },
            {
              "value": "I Don't Know",
              "checked": false
            }
          ]
        }
      ]
    }
    };
  }

  updateAnswer(index,ansindex,value,checked){
    if(!Array.isArray(this.answer[index])){
      this.answer[index] = []
    }
    if(checked){
     this.answer[index][ansindex] =  value
    }else{
      this.answer[index].splice(ansindex,1)
    }
  }

演示

查看链接https://stackblitz.com/edit/ionic-jsxle7?file=pages%2Fhome%2Fhome.ts

【讨论】：

正是我想要的。你是最好的兄弟。拥抱。非常感谢