как поймать ответ в методе POST в Angular 7

Question

Я работаю с Angular 7 и хочу получить ответ, что данные сохранены или нет.

В своем коде веб-службы я устанавливаю статус "Success", если данные успешно сохранены, и "Unsuccessful", если данные не сохраняются в базе данных.

Я хочу дать предупреждение пользовательскому интерфейсу, который отправляется веб-службой.

ниже - мой код пользовательского интерфейса для вызова веб-службы для сохранения данных в БД.

return this.httpService.post(this.baseUrl + this.serviceUrl + 'saveData', body, httpOptions)
            .pipe(
                catchError(this.handleError('addData', data))
            );

Кто-нибудь может мне помочь с этим?

Заранее спасибо!

Answer 1

Вот простой подход, который я использовал, когда ответная реакция обслуживающего устройства захватывается и отображается в модальном диалоговом окне [с использованием дизайна материала] - повторно используемый компонент (указатели псевдокода ниже, обновляйте по мере необходимости):

this.backEndService.myAPI(serviceRequest)
            .subscribe(res => {
                this.postProcess(res as string);
            },
                (error) => {
                    //handle error
                }
            );

Продолжение логики обработки ответа:

 private postProcess(generatedResponse: string) {
        //do things like set loading to false etc..
        const dialogRef = this.dialog.open(ModalDialogComponent, {
            data: generatedResponse
        });
        dialogRef.afterClosed().subscribe(result => {
            // nothing in my case
        });
    }

модальный-dialog.component.ts

import { Component, OnInit, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';

@Component({
    selector: ...,
    templateUrl: ..,
    styleUrls: [...]
})


export class ModalDialogComponent implements OnInit {

    constructor(
        public dialogRef: MatDialogRef<ModalDialogComponent >,
        @Inject(MAT_DIALOG_DATA) public generatedResponse: string) { }

    ngOnInit() {
    }


    public onOk() {
        console.log('onOk');
        this.dialogRef.close({
            data: {
                closed: true
            }
        });
    }
}

модальной dialog.component.html

<h2 mat-dialog-title>....</h2>

<mat-dialog-content>
    <section fxLayout="row wrap" fxLayoutAlign="center center">
        <mat-card fxFlex="500px" fxFlex.xs="100%">
            <mat-card-title>Title
            </mat-card-title>
            <mat-card-content>
                <div fxLayout="column wrap" fxLayoutGap="40px grid">

                    <div fxLayout="row wrap" fxLayoutAlign="center center">
                        <div fxFlex="65%"><strong>Status</strong>{{generatedResponse}}
                        </div>
                    </div>

                </div>
            </mat-card-content>
        </mat-card>
    </section>

</mat-dialog-content>

<mat-dialog-actions>
    <button class="mat-raised-button" (click)="onOk()">OK</button>
</mat-dialog-actions>