Getting this strange error in my HTML that says property ‘id’ does not exist on type Order[] when it does very explicitly exists

The error: Property 'id' does not exist on type 'Order[]'

Here is the HTML:

<div class="admin-page" *ngIf="order">
  <p-card [header]="'View Order'" subheader="You can edit order status here">
          <h5>Order Id</h5>
          <p>{{ order.id }}</p> //HERE I AM GETTING THE ERROR
        </div>

Here is the relevant ts:

export class OrderDetailComponent {
  order: Order[] = [];

private _getOrder() {
    this.route.params.subscribe((params) => {
      if (params['id']) {
        this.orderService
          .getOrder(params['id'])
          .subscribe((order) => {
            this.order = order;
            console.log(this.order);
          });
      }
    });
  }

}

And the orde.ts file:

/* eslint-disable @typescript-eslint/no-explicit-any */
import { User } from '@eshop-repository/users';
import { OrderItem } from './order-item';

export class Order {
  
  id?: string;
  orderItems?: OrderItem[];
  shippingAddress1?: string;
  shippingAddress2?: string;
  city?: string;
  zip?: string;
  country?: string;
  phone?: string;
  status?: number;
  totalPrice?: string;
  user?: User;
  dateOrdered?: string;
  _id?: string;
  
}

And the order-item.ts file:

/* eslint-disable @nrwl/nx/enforce-module-boundaries */
import { Product } from "@eshop-repository/products";

export class OrderItem {
    product?: Product;
    quantity?: number;
  }

The error I am getting is that id doesn’t exist on Order, when you can see it very clearly does. Order is an array, maybe that is causing the problems?

Any help would be appreciated.

>Solution :

You declared order as an array of Order (Order[])

Simply change your declaration to

export class OrderDetailComponent {
  order: Order; //instead of Order[]
}