Я продолжаю получать эту наблюдаемую ошибку <{}>, которую нельзя присвоить наблюдаемой <Product>Angular 7

Question

Я использую Visual Studio IDE для MAC, я могу создать приложение Angular 7, но не могу запустить приложение в браузере.Я получаю ошибку во втором методе. Observable <{}> не присваивается Observable

import { Injectable } from '@angular/core';
import { Product } from '../interfaces/product';
import { HttpClient } from '@angular/common/http';
import { shareReplay, flatMap, first } from 'rxjs/operators';
import { Observable} from 'rxjs';


@Injectable({
     providedIn: 'root'
 })

export class ProductService {

  constructor(private http : HttpClient) { }

  private baseUrl: string = "/api/product/getproducts";

  private product$: Observable<Product[]>;

  /*This Method Works Fine */

  getProducts() : Observable<Product[]>
            {

               this.product$ = this.http.get<Product[]> 
               (this.baseUrl).pipe(shareReplay());
               return this.product$;

            }

        /*Error on this Method  */

  getProductById(id : number) : Observable<Product> 
            {
               return this.getProducts().pipe(flatMap(result => result), 
first(product => product.productId == id))
            }

                         }

export interface Product {
            productId?: number;
            name: string;
            description: string;
            outOfStock: boolean;
            price: number;
            imageUrl: string;
        }

Answer 1

В соответствии с моими комментариями к вашему вопросу, успешно сменив ваш метод на следующие:

  getProductById(id: number): Observable<Product> {
    return this.getProducts().pipe(
      map(products => products.find(product => product.productId === id))
    );
  }

StackBlitz