My component:

onSave() {
     console.log(this.receivedPropertyForm.value)
     this.micro.postButton(this.receivedPropertyForm.value.ItemRec[0]) .subscribe({ next:(res)=>{console.log(res) } })
}

This is my service where I pass my object to backend to SQL:

postButton(data) {
    return this.http.post(environment.baseURL   'PropertyTransactionDetails/Add', data)
}

My controller in backend:

[HttpPost("Add")]
public async Task<ActionResult<PropertyTransactionDetailsDTO>> Add([FromBody] 
PropertyTransactionDetailsDTO item)
{
    if (item == null)
        item = new PropertyTransactionDetailsDTO();

    return Ok(await _PropertyTransactionDetailsRepository.Insert(item));
}

Here I try to post 2 objects:

2 OBJECT ARRAY

MY DATABASE

My question is how to display the other row or more rows in the database?

CodePudding user response：

By the looks of it, it appears that you POST only the first item from the array this.receivedPropertyForm.value.ItemRec[0].

Depending how you plan to set up your business logic in backend I would say you have two options here.

Short and quick fix is to iterate over all obj's you want to post and post each, one at a time (which obviously would mean more requests from frontend which is not good), but it would work. This could be enhanced with RXJS operators to handle observables and resolve them more elegantly - perhaps we could avoid the need to call .subscribe() by using | async pipe? But if you don't do the latter, at least make sure to .unsubscribe() too!

onSave() {
console.log(this.receivedPropertyForm.value)

for (const item of this.receivedPropertyForm.value?.ItemRec) {
  this.micro.postButton(item).subscribe((response) => {
    console.log(response)
    });
  }
  
}

A more correct way would be perhaps to POST the entire array of items, iterate over them in backend and finally return list of items. For that implementation you would need to revise all parts and think through how you want to approach this.