Angular create a datatable of Orders using data from an API that offers only a list of Order numbers an an endpoint that returns an Order's details

Angular learner here. I am given an endpoint that GETs an array of integers that are unique identifiers and an endpoint that GETs a singular Order object with a number as the parameter in the URL. In my Angular component I need to display a datatable with list of order objects. But there is no endpoint from my data provider for a list Order objects. Their documentation for their RESTful API is here. They basically told me to build my own data structure using only these two of their endpoints and instructing me on how to do it is out of scope for them being an Angular subject.

How do I create a data source for a datatable that "merges" the two Observables that I created in my service?

order.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription, zip, Observable, observable } from 'rxjs';
import { OrderService } from '../order.service';
import { IOrder } from '../order.model';

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

  orders: Array<IOrder> = [];

  constructor(private service: OrderService) { 
    this.orderNumbers$ = this.service
      .getOrders()
      .subscribe();

    this.order = this.service
      .getOrder(2200)     // using this as an example but I will need to set these with my latest order starting from n
      .subscribe();

       let latestOrder = this.orderNumbers$[this.orderNumbers$.length-1];

    for (let i = latestOrder; i > 0; i--) {
      // need to retrieve current order here in a variable and pass it to the datasource for the datatable
      // let currentOrder = 
      this.orders.push(currentOrder);
    }

  }

  ngOnInit(): void {
  }

}

order.service.ts

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


@Injectable({
  providedIn: 'root'
})
export class OrderService {
  private authKey = "<my-key>";

  constructor(private http: HttpClient) { }

  // returns an Observable event with the unique identifiers for the orders
  getOrders() {
    let headers = new HttpHeaders().set(
      "Authorization",
      "API-Token " + this.authKey
    );

    let reqUrl = "https://api.paperlessparts.com/orders/public/new";
    
    return this.http.get(reqUrl, {headers: headers}); 
  }

  // returns an Observable event to a signle Order object
  getOrder(num: number) {
    let headers = new HttpHeaders().set(
      "Authorization",
      "API-Token " + this.authKey
    );

    let reqUrl = "https://api.paperlessparts.com/orders/public/" + num.toString();
    return this.http.get(reqUrl, {headers: headers}); 
  }
}

template:

<div class="container">
    <div class="card m-5 p-3">
        <div class="card-body">
            <table class="table table-bordered table-striped table-hover">
                <tbody>
                <tr *ngFor="let order of latestOrders">
                    <td>{{ order.number }}</td>
                    <td>{{ order.name }}</td>
                    <td>{{ order.date | date: 'medium' }}</td>
                </tr>
                </tbody>
            </table>
        </div>

    </div>
</div>