在angular7中读取复杂的嵌套json对象数组

{
  "employees": [
    {
      "firstName": "John",
      "lastName": "Doe",
      "age": 30,
      "department": {
        "name": "IT",
        "location": "New York"
      },
      "projects": [
        {
          "name": "Project A",
          "status": "ongoing"
        },
        {
          "name": "Project B",
          "status": "completed"
        }
      ]
    },
    {
      "firstName": "Jane",
      "lastName": "Smith",
      "age": 25,
      "department": {
        "name": "HR",
        "location": "London"
      },
      "projects": [
        {
          "name": "Project C",
          "status": "ongoing"
        }
      ]
    }
  ]
}

interface Employee {
  firstName: string;
  lastName: string;
  age: number;
  department: {
    name: string;
    location: string;
  };
  projects: {
    name: string;
    status: string;
  }[];
}

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-employee-list',
  templateUrl: './employee-list.component.html',
  styleUrls: ['./employee-list.component.css']
})
export class EmployeeListComponent implements OnInit {
  employees: Employee[] = [];

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get<Employee[]>('assets/data.json').subscribe(data => {
      this.employees = data;
    });
  }
}

<ul>
  <li *ngFor="let employee of employees">
    <h2>{{ employee.firstName }} {{ employee.lastName }}</h2>
    <p>Age: {{ employee.age }}</p>
    <p>Department: {{ employee.department.name }} ({{ employee.department.location }})</p>
    <h3>Projects:</h3>
    <ul>
      <li *ngFor="let project of employee.projects">
        {{ project.name }} ({{ project.status }})
      </li>
    </ul>
  </li>
</ul>