Angular6 / AWS Amplify-Subscribe（）无法捕获fromPromise（）中的错误

Question

I am currently building a Web app based on Angular6 and using AWS Amplify to call the API.

USE CASE: In the component, submitForm function calls updateProduct function from the service. This call returns an error.

ISSUE: At the service level, in updateProduct function I am able to catch the error (all good), but at the component level, I cannot catch the error.

QUESTION: Why? What am I doing wrong?

Here the code

The service:

import { Injectable } from '@angular/core';
import { AmplifyService } from 'aws-amplify-angular';
import { Observable } from 'rxjs/Observable';
import { fromPromise } from 'rxjs/observable/fromPromise';

@Injectable({
  providedIn: 'root'
})
export class ProductService {

  constructor(
    private amplifyService: AmplifyService
  ) { }

...

  public updateProduct(product: any): Observable<any> {
    const myInit = {
      body: product
    };
    return fromPromise(this.amplifyService.api().post('dev-myapi', '/product/' + product.id, myInit)
      .then(response => {
        console.log(response);
      })
      .catch(error => {
        console.log('ERROR API', error.response);
      }));
  }

}

The component

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
import { ProductService } from '../../../services/product.service';

@Component({
  selector: 'app-product-edit',
  templateUrl: './product-edit.component.html',
  styleUrls: ['./product-edit.component.css']
})
export class ProductEditComponent implements OnInit {
    @Input() product: any;
    public myForm: FormGroup;

  constructor(
    private _formBuilder: FormBuilder,
    private productService: ProductService
  ) { }

  ngOnInit() {
    this.createForm();
  }

...

  submitForm(product: any, isValid: boolean) {
    if (isValid) {
      // Add Product ID
      console.log(this.product);
      product.id = this.product.id;
      product.type = this.product.type;
      this.productService.updateProduct(product)
        .subscribe(
          data => {
            console.log('UPDATE SUCCESS', data);
          },
          error => {
            console.log('ERROR', error);
          }
        );
    } else {
      console.log('Form is not valid');
    }
  }
}

And the console log: Console log

Answer 1

如果要在组件级别捕获错误，请在服务中跳过捕获，或者在捕获之后继续抛出 。