Javascript 使用ionic angular 5在数组中存储输入值

在我的html页面中有：

<ion-grid style="margin-bottom: 25px;">
  <ion-row padding>
    <ion-col col-11>
      <label class="bold">Title</label>
      <ion-input type="text" class="bordered" placeholder="Enter Title" [(ngModel)]="data.title"></ion-input>
    </ion-col>
  </ion-row>

  <ion-row padding>
    <ion-col col-11 class="pharagraph margin-bottom">
      <label class="bold">Pharagraph</label>
      <ion-textarea rows="10" class="bordered" placeholder="Enter Content Paragraph" [(ngModel)]="data.paragraph"></ion-textarea>
    </ion-col>
  </ion-row>

  <ion-row padding *ngFor="let input of inputs; let i=index">
    <ion-col col-11 class="pharagraph margin-bottom">
      <ion-textarea rows="10" class="bordered" placeholder="Enter Content Paragraph" [(ngModel)]="data.paragraph[i]"></ion-textarea>
    </ion-col>

    <ion-col col-1>
      <button ion-button clear icon-start icon-right (click)="delParagraph(i)"><ion-icon name="trash" color="danger"></ion-icon></button>
    </ion-col>
  </ion-row>

  <ion-row padding>
    <ion-col col-11>
      <button ion-button block color="danger" id="addPharagraph" (click)="addParagraph()"><ion-icon name="add-circle"></ion-icon> &nbsp; add pharagraph</button>
    </ion-col>
  </ion-row>

</ion-grid>

<div class="tab" style="position: fixed; bottom: 0;">
  <a class="tab-item" (click)="save()">Save Draft</a>
</div>

使用这些代码，我只能以一维显示数据，如下所示：

{
    "title":"testing title",
    "paragraph":"testing paragraph 1"
}

但我希望它以这种形式显示：

{
    "title":"testing title",
    "paragraph":[
        {"paragraph": "testing paragraph 1"},
        {"paragraph": "testing paragraph 2"},
        {"paragraph": "testing paragraph 3"}
    ]
}

---

我建议如下：

类别：

data = {
    "title": "testing title",
    "paragraphs": [
      { "paragraph": "testing paragraph 1" },
      { "paragraph": "testing paragraph 2" },
      { "paragraph": "testing paragraph 3" }
    ]
  }

...

addParagraph(){
    this.data.paragraphs.push( { "paragraph": "" });
 }

delParagraph(paragraphID){
    this.data.paragraphs.splice(paragraphID,1);
}

HTML

添加药典

---

您好，我想您应该定义段落数组而不是字符串

this.data.title = '';
this.data.paragraph = [{}] instead of '';

并将您的段落推送到this.data.paragration；）

<ion-row padding *ngFor="let paragraph of data.paragraphs; let i=index">
    <ion-col col-11 class="pharagraph margin-bottom">
        <ion-textarea rows="10" class="bordered" placeholder="Enter Content Paragraph" [(ngModel)]="paragraph.paragraph"></ion-textarea>
    </ion-col>
    <ion-col col-1>
        <button ion-button clear icon-start icon-right (click)="delParagraph(i)"><ion-icon name="trash" color="danger"></ion-icon></button>
    </ion-col>
</ion-row>

<ion-row padding>
    <ion-col col-11>
        <button ion-button block color="danger" id="addPharagraph" (click)="addParagraph()"><ion-icon name="add-circle"></ion-icon> &nbsp; add pharagraph</button>
    </ion-col>
</ion-row>

this.data.title = '';
this.data.paragraph = [{}] instead of '';

this.data.paragraph.push({paragraph: 'My text content'});