如何从 Angular http 帖子中将 OKObjectResult 作为字符串返回

Question

I'm struggling to find how to pass the payGateR string in my OkObjectResult to my component. Can you please point me in the right direction or explain to me what I'm doing wrong? Currently, I am returning an object to the angular property of payGateResponse after converting it to string to avoid errors.

I hope I have provided enough info. Any help is appreciated!

ASP.NET Web Api

    [HttpPost("PaymentDetails")] 
    public IActionResult PostPaymentDetails(PaymentDetails paymentDetails)
    {
        // Rest of Code

            if (status == "OK" || status == "AUTHORIZED")
            {
                return Ok(new
                { payGateR = decryptResponse });
            }
            else
            {
                return NotFound();
            }
    }

Angular service

export class PaymentDetailsService {
 formData: PaymentDetails;
 readonly rootURL = 'https://localhost:44386/api/';

 constructor(private http: HttpClient) { }

 postPaymentDetails() {
   return this.http.post(this.rootURL + 'order/paymentdetails', this.formData);
 }
}

Angular Component

export class ShoppingCartFormComponent implements OnInit {
  order: IOrder[];
  payGate: IPayGate[];
  payGateResponse: string;

  cardBrands: string[] = [
    'VISA',
    'MasterCard'
  ];

  constructor(private http: HttpClient,
    private service: PaymentDetailsService, private toastr: ToastrService) { }

  ngOnInit(): void {
  }

  onSubmit(form: NgForm) {
    this.service.postPaymentDetails().subscribe(
      res => {
        this.resetForm();
        this.toastr.success('Payment Successful', 'Oh yeah!');
        this.payGateResponse = res.toString();
        console.log(res);
      },
      err => {
        this.toastr.error('Payment Not Successful');
        this.resetForm();
        console.log(err);
      }
    )
  }

Answer 1

Angular HttpClient default response body is JSON . If you want your response object to be something else you should add 'observe': 'body' to the options of your request.

So your request should look like this

 postPaymentDetails() {
   return this.http.post(this.rootURL + 'order/paymentdetails', this.formData, {observe: 'body'});
 }

Now you can put anything you want in the body of your response and you can access it via res.body in Angular

Answer 2

Adding responseType: 'text' solved my problem.

Source: https://angular.io/guide/http#requesting-non-json-data

postPaymentDetails() {
    return this.http.post(this.rootURL + 'order/paymentdetails', this.formData, {                     
   responseType: 'text' });
}