将表单数据作为数组发送

Question

我有一个表单，其中一个循环有五个字段，我想将其发送到 API 以便将其保存到数据库中。

这是product.page.html

<details *ngFor="let product of products;">
    <summary>{{product.name}}</summary>
    <ion-input type="text" [(ngModel)]="categoryId" value="{{product.categoryId}}"></ion-input>
    <ion-input type="text" [(ngModel)]="productId" value="{{product.id}}"></ion-input>

    <ion-row>
        <ion-col>
            <ion-input type="text" [(ngModel)]="minPrice" value="{{product.minPrice}}"></ion-input>
        </ion-col>

        <ion-col>
            <ion-input type="text" [(ngModel)]="maxPrice" value="{{product.maxPrice}}"></ion-input>
        </ion-col>
    </ion-row>
    <ion-row>
        <ion-col>
            For Sale:
            <ion-select [(ngModel)]="forSale" interface="popover">
                <ion-select-option value="0">No</ion-select-option>
                <ion-select-option value="1">Yes</ion-select-option>
            </ion-select>
        </ion-col>
    </ion-row>
</details>
<ion-button type="button" (click)="saveDetails()">Save</ion-button>

这是product.page.ts

...
categoryId: any;
productId: any;
minPrice: any;
maxPrice: any;
forSale: any;

saveDetails() {

    let data = {categoryId: this.categoryId, productId: this.productId, minPrice: this.minPrice, maxPrice: this.maxPrice, forSale: this.forSale};

    this.http.post('http://example.com/api/saveDetails', JSON.stringify(data))
    .subscribe((res: any) => {console.log("success");});
}

问题是我不知道如何以以下格式发送该数据，因为 API 只接受这种格式将其保存到数据库中。

"productList": [
    {
        //First
        'categoryId': 'value',
        'productId': 'value',
        'minPrice': 'value',
        'maxPrice': 'value',
        'forSale': 'value'
    },
    {
        //Second
        'categoryId': 'value',
        'productId': 'value',
        'minPrice': 'value',
        'maxPrice': 'value',
        'forSale': 'value'
    },
    ...
],

我们将不胜感激。

Answer 1

例如，您可以使用ReplaySubject。在product.page.ts 中执行此操作：

private readonly dataSend = new ReplaySubject();

ngOnInit(): void {
  this.dataSend.pipe(
    scan((acc, current) => {
      acc.push(current)
      return acc;
    }, []), 
    debounceTime(1),
    switchMap(data => this.http.post('http://example.com/api/saveDetails', data))
).subscribe(console.log);
}

...

saveDetails() {

    const data = {categoryId: this.categoryId, productId: this.productId, minPrice: this.minPrice, maxPrice: this.maxPrice, forSale: this.forSale};

    this.dataSend.next(data);
}

...

ngOnDestroy(): void {
  this.dataSend.complete();
}