javascript - 将输入值存储在 ionic Angular 为 5 的数组中

Question

我的 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>

如您所见，默认情况下有一个段落输入，用户可以选择添加任意多的段落。

这是我的 TypeScript :

data:any = {};

constructor(public navCtrl: NavController, public navParams: NavParams, public http: Http) {
    this.data.title = '';
    this.data.paragraph = '';
}

addParagraph(){
    this.inputs.splice(0,0,this.inputs.length+1);
 }

delParagraph(paragraphID){
    this.inputs.splice(this.inputs.indexOf(paragraphID), 1);
}

save(){
    var testData = JSON.stringify(this.data);
    console.log(testData);
}

使用这些代码，我只能像这样在一维中显示数据:

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

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

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

Answer 1

我建议如下:

类:

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

<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>

Demo