Как использовать ngFor со сложным json в angular для рендеринга данных ul li

У меня есть простое представление html с некоторыми ul и li. Но мне нужно получить ту же структуру с ngfor, используя массив jsonarray в коде. Вот код ниже https://stackblitz.com/edit/angular-eigvsq?file=src%2Fapp%2Fapp.component .тс

app.component.html

<div>
  <ul>
    <h5>Red</h5>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <h5>Blue</h5>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</div>

app.component.ts

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular";
  jsonarray = {
    id: "0001",
    Red: [
      { id: "1001", Order: 1 },
      { id: "1002", Order: 2 },
      { id: "1003", Order: 3 }
    ],
    Blue: [
      { id: "5001", Order: 4 },
      { id: "5002", Order: 5 },
      { id: "5005", Order: 6 }
    ]
  };

  ngOnInit() {}
}