如何在Angular 4中创建用于表单提交的JSON数组

Let's fix your code step by step to produce the exact JSON array format you need for database storage. Here's what you need to change:

1. Update the BoQuote Model #

First, add the missing price property to match your target JSON structure:

export class BoQuote { 
  brand: string = ""; 
  size: string = ""; 
  quantity: string = ""; 
  price: string = ""; // New property to include price
}

2. Simplify Component Variables #

Replace your separate quantity, size, and brand objects with a single currentQuote variable of type BoQuote. This groups all form fields into one object:

// In your component class
currentQuote: BoQuote = new BoQuote();
item: BoQuotes = new BoQuotes(); // Ensure this is initialized

3. Update Form Bindings #

Modify your form inputs to bind directly to the currentQuote object's properties, and add a new input for price:

<form> 
  <div class="col-md-4"> 
    <input type="text" [(ngModel)]="currentQuote.quantity" name="quantity" class="form-control" placeholder="Quantity"> 
  </div> 
  <div class="col-md-4"> 
    <input type="text" [(ngModel)]="currentQuote.size" name="size" class="form-control" placeholder="Size"> 
  </div> 
  <div class="col-md-4"> 
    <input type="text" [(ngModel)]="currentQuote.brand" name="brand" class="form-control" placeholder="Brand"> 
  </div>
  <!-- Add price input to match your target JSON -->
  <div class="col-md-4"> 
    <input type="text" [(ngModel)]="currentQuote.price" name="price" class="form-control" placeholder="Price"> 
  </div>
</form>

4. Fix the addItem Method #

Instead of pushing individual properties into the quotes array, create a complete BoQuote object and push it once. We'll also reset the form for new entries:

addItem() { 
  var retrievedData = localStorage.getItem("userId"); 
  var loggdinUser = JSON.parse(retrievedData); 
  this.item.userId = loggdinUser[0]._id; 

  // Create a copy of currentQuote to avoid reference issues
  const newQuote: BoQuote = { ...this.currentQuote };

  // Push the full quote object into the array (not individual properties!)
  this.item.quotes.push(newQuote); 

  U.log("Item to be add : " + JSON.stringify(this.item)); 

  if (!this.item.userId) { 
    return; 
  } 

  this.quotesService.addItem(this.item).subscribe( 
    data => { 
      U.log("Success:-" + JSON.stringify(data)); 
      // Reset currentQuote to empty for the next entry
      this.currentQuote = new BoQuote();
      // Optional: Remove window.reload() if you want to preserve UI state
      // window.location.reload(); 
    }, 
    err => { 
      U.log("err1 : " + JSON.stringify(err)); 
    } 
  ); 
}

Why This Works #

• Each entry in this.item.quotes is now a full BoQuote object with all four properties (size, quantity, price, brand), exactly matching your target JSON format.
• Using a single currentQuote object simplifies form binding and ensures all fields are grouped correctly.
• Creating a copy of currentQuote (with { ...this.currentQuote }) prevents unintended changes to already added quotes if you modify the form later.

When you stringify this.item, the quotes property will be the array of objects you need for database storage.

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