Отправка данных формы в виде массива

#angular #ionic-framework

Вопрос:

У меня есть форма, в которой у меня есть пять полей для одного цикла, и я хочу отправить ее в 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>

Это продукт.страница.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'
    },
    ...
],

Любая помощь, которая сделает это возможным, будет признательна.

1. Не могли бы вы, пожалуйста, опубликовать свой сгенерированный JSON здесь ?

2. @bZezzz Когда я нажимаю кнопку сохранить, я получаю неопределенную ошибку в консоли chrome. Таким образом, JSON не генерируется.

3. console.log(JSON.stringify(data)) ?

4. ответ будет {}

5. @bZezzz что ты думаешь? В чем проблема?

Ответ №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();
}