Angular: нужно получить определенный объект из массива и вывести его в html

Не могу получить объект из массива по id. У меня есть страница, в URL которой находиться id по которому нужно найти определенный объект в массиве и отобразить его на странице. Код ошибок никаких не выдает, но и выводить поля объекта не хочет. Функция getOrders() в orders.service.ts точно работает, так как с её помощью я вывожу все объекты массива на другой странице. Я думаю что проблема в ngOnInit() в файле order-detail.component.ts и getOrder() в файле orders.service.ts

order-detail.component.html

<p>order-detail works!</p>
<h3>{{ order$.name }}</h3>
<h3>{{ order$.description }}</h3>

order-detail.component.ts

import { Component, OnInit } from '@angular/core';
import { switchMap } from 'rxjs/operators';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
import { Observable } from 'rxjs';
import { Order } from '../order';

import { OrdersService } from '../orders.service';

@Component({
  selector: 'app-order-detail',
  templateUrl: './order-detail.component.html',
  styleUrls: ['./order-detail.component.scss']
})
export class OrderDetailComponent implements OnInit {
  order$!: any;

  constructor(
    private route: ActivatedRoute,
    private orderService: OrdersService,
  ) {}

  ngOnInit(): void {
    this.order$ = this.route.paramMap.pipe(
      switchMap((params: ParamMap) =>
        this.orderService.getOrder(params.get('id')!))
    );
  }

}

orders.service.ts

import { Injectable } from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import { map } from 'rxjs/operators';

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

  constructor(private http: HttpClient) { }

  getOrders(){
    let headers = new HttpHeaders();
    headers.append('Content-Type', "applicaton/json");
    return this.http.get('http://localhost:3000/account/orders',
    {headers: headers}).pipe(map((response: any) => response));
  }

  getOrder(id: number | string){
    return this.getOrders().pipe(
      // (+) before `id` turns the string into a number
      map((orders: any) => orders.find((order: any) => order._id === +id)!)
    );
  }

}

Ответы (0 шт):