Ionic Angular 5中如何将段落输入值存储为对象数组？

Let's fix this step by step to get the exact data format you're looking for. The core issue right now is that your data.paragraph is initialized as a string instead of an array of objects, and your current setup uses a separate inputs array that isn't directly tied to the data structure you need.

Step 1: Update the TypeScript Code #

First, adjust how you initialize your data and modify the add/delete methods to work directly with the paragraph array (we can even eliminate the separate inputs array entirely):

data: any = {};

constructor(public navCtrl: NavController, public navParams: NavParams, public http: Http) {
  // Initialize title as empty string, and paragraph as an array with one empty object (matches your default input)
  this.data.title = '';
  this.data.paragraph = [{ paragraph: '' }];
}

addParagraph() {
  // Add a new empty paragraph object to the array whenever the button is clicked
  this.data.paragraph.push({ paragraph: '' });
}

delParagraph(index: number) {
  // Prevent deleting the last paragraph (remove this check if you want to allow empty state)
  if (this.data.paragraph.length > 1) {
    this.data.paragraph.splice(index, 1);
  }
}

save() {
  var testData = JSON.stringify(this.data);
  console.log(testData);
  // This will now output your desired array-of-objects format!
}

Why this works: #

• We initialize data.paragraph as an array (with one starting object) instead of a string
• addParagraph() directly appends new objects to the array, so each input is tied to a unique object in the data structure
• delParagraph() removes the specific object at the given index, with a safeguard to keep at least one paragraph input

Step 2: Update the HTML Template #

Now adjust your template to bind directly to the data.paragraph array, removing reliance on the separate inputs array:

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

  <!-- Render all paragraph inputs (including the default one) by looping through the data.paragraph array -->
  <ion-row padding *ngFor="let para of data.paragraph; let i=index">
    <ion-col col-11 class="pharagraph margin-bottom">
      <!-- Only show the "Paragraph" label for the first input to match your original layout -->
      <label class="bold" *ngIf="i === 0">Paragraph</label>
      <ion-textarea rows="10" class="bordered" placeholder="Enter Content Paragraph" [(ngModel)]="para.paragraph"></ion-textarea>
    </ion-col>
    <!-- Only show delete button if there's more than one paragraph -->
    <ion-col col-1 *ngIf="data.paragraph.length > 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 paragraph
      </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>

Key changes here: #

• We removed the separate default paragraph row and use *ngFor to render all inputs directly from data.paragraph
• [(ngModel)] now binds to para.paragraph, linking each textarea directly to the corresponding object in the array
• We keep the original layout by only showing the "Paragraph" label for the first input and hiding the delete button when only one paragraph exists

Test the Output #

After making these changes, when you fill in inputs and click "Save Draft", your console will log exactly the format you want:

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

内容的提问来源于stack exchange，提问作者Emerald