如何在 Angular 7 中的 POST 方法中捕获响应

Question

我正在使用 Angular 7，并希望捕获数据是否已保存的响应。

在我的 Web 服务代码中，我正在设置状态"Success"数据是否成功保存，以及数据是否未保存到数据库"Unsuccessful"。

我想向 Web 服务发送的 UI 发出警报。

下面是我的 UI 代码来调用 Web 服务将数据保存到数据库中。

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

谁能帮我解决这个问题？

提前感谢！

Answer 1

这是我使用的一种简单方法，其中捕获服务者 esponse 并将其显示在模态对话框中 [使用材料设计] - 可重用组件(下面的伪代码指针，根据需要更新(：

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
        });
    }

modal-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
            }
        });
    }
}

modal-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>