Более простой способ инициализации интерфейса с несколькими вложенными объектами Angular

Question

У меня есть интерфейс с несколькими вложенными объектами, и я хочу иметь более простой способ их инициализации.

В настоящее время мой интерфейс

export interface Order {
  _id: string;
  orderDetails: {
    create_time: string;
    id: string;
    payer: {
      address: {
        country_code: string;
      };
      email_address: string;
      name: {
        given_name: string;
        surname: string;
      };
      payer_id: string;
    };
    purchase_units: [
      {
        amount: {
          value: string;
          currency_code: string;
        };
        payee: {
          email_address: string;
          merchant_id: string;
        };
        shipping: {
          address: {
            address_line_1: string;
            address_line_2: string;
            admin_area_1: string;
            admin_area_2: string;
            country_code: string;
            postal_code: string;
          },
          name: {
            full_name: string
          }
        };
      }
    ]
  };
  products: [
    {
      quantity: number
      _id: string,
      product: {
        _id: string,
        amount: number,
        category: string,
        description: string,
        imageUrls: [],
        title: string,
        userId: string
      }
    }
  ];
  user: {
    name: string,
    userId: string
  };
}

и затем я получаю их вот так

export class AllOrdersComponent implements OnInit {
  order: Order = {orderDetails: {payer:{name: {} as any}as any} as any} as any;
  id: string;
  constructor(
    private route: ActivatedRoute,
    private adminService: AdminService
  ) {}

  ngOnInit() {
    this.route.params.subscribe((params: Params) => {
      this.id = params["id"];
      this.adminService.getOrder(this.id)
     .subscribe(orderData => {
       this.order = orderData.order;
     })
    });
  }
}

проблема в том, что если я не инициализирую их перед выполнением http-запроса в функции OnInit, то получаю ошибку, что '_co.order.orderDetails' не определено.

, поэтому я инициализирую их как Я делаю в начале компонента, однако, он выглядит очень многословным и избыточным, должен быть более красивый и простой способ сделать это?

Answer 1

Проблема не в структуре вашего объекта. Когда вы ожидаете асинхронных данных, везде, где вы хотите их использовать, вы должны проверить, определена ли переменная. Не делай себе пустой предмет. Держите его неопределенным, прежде чем вы получите фактические данные.

Так что в вас HTML вы можете использовать

<div *ngIf="order">
  <span>{{ order.orderDetails.payer.email_address }}</span>
</div>

Кроме того, при определении вашего интерфейса вы можете создавать интерфейсы подобъекта, для ответственности:

export interface Order {
  _id: string;
  orderDetails: OrderDetails;
  products: Products[];
  user: User;
}