时间戳

首页 > 解决方案 > 如何在 ionic 4 中将项目添加到 json 数组

angular - 如何在 ionic 4 中将项目添加到 json 数组

问题描述

我有一个包含以下数据的 json 数组。

  "civilWorks": [
    { 
      question: ' question 1. ', 
      radio_name: 'radio_1',
      radio_input: '',
      text_name: 'text_1',
      text_input: '',
      id: 'id1'       
    },

    { 
      question: ' Question 2.', 
      radio_name: 'radio_2',
      radio_input: '','',  
      text_name: 'text_2',
      text_input: '',
      id: 'id2'    
    }
  ]

我正在尝试通过使用按钮的方法添加更多文本输入。我已经能够通过 addMore 方法成功添加新问题，但不能添加到现有问题。

我的html如下。

html

<ion-card *ngFor="let item of form; let i=index;">
  <ion-card-content>
    <div class="question">
        {{ item.question }}
    </div>

    <ion-radio-group name="{{item.radio_name}}" [(ngModel)]="form[i].radio_input">         
      <ion-row class="radio-tags">
        <ion-item class="radio-tag" lines="none">
          <ion-label class="tag-label">compliant</ion-label>
          <ion-radio value="compliant" (click)="closeSelect(i)"></ion-radio>
        </ion-item>
        <ion-item class="radio-tagtwo" lines="none">
          <ion-label class="tag-label">non-compliant</ion-label>
          <ion-radio value="non-compliant" (click)="openSelect(i)"></ion-radio>
        </ion-item>
      </ion-row>
    </ion-radio-group>

    <div *ngIf="show[i]">
      <ion-button (click)="addMore(i)" expand="full" color="primary">Add more text boxes</ion-button><br>
      <ion-item>
          <ion-label position="floating" >Text</ion-label>
          <ion-textarea name="{{item.text_name}}" [(ngModel)]="form[i].text_input"></ion-textarea>
        </ion-item>    
    </div>
  </ion-card-content>
</ion-card>

我的 addMore 方法如下。我无法深入研究 this.form 并为现有问题添加信息。

ts

addMore(index: number){
  const newFormItem = this.form;
  newFormItem.push(
    {
      'text2_name': 'text_3',
      'text2_input': '',
    }
  );
  console.log("new items", newFormItem);
}

日志输出的图像

日志文件的图像

标签： angularionic4

解决方案

请看这里：你做了错误的 addMore 函数。

<div class="question">
   {{ item.question }} // here item has question property
</div>

像这样更改它，然后它应该可以工作。

addMore(index: number){
  const newFormItem = this.form;
  newFormItem.push(
    { 
      question: ' Question 3.', 
      radio_name: 'radio_3',
      radio_input: '','',  
      text_name: 'text_3',
      text_input: '',
      id: 'id3'    
    }
  );
  console.log("new items", newFormItem);
}

推荐阅读