Javascript 如何在angular中使用ngFor和复杂json来呈现ul li数据

我有一个简单的html视图和一些ul和li。但是在代码中使用数组“jsonarray”时，我需要获得与NGO相同的结构

app.component.html

{{data.key}
{{fields.Order}

工作人员突击检查：-

---

首先，只需保留要在模板中显示的值，我的意思是从jsonarray属性中删除

id:'0001'

字段。然后，在模板中，您可以使用：

{{item.key}

{{subItem.Order}

如果您知道您需要一个

ngFor

，那么为什么不使用

ngFor

来编写呢？或者，你想让别人给你写这封信吗？

<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>

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() {}
}

<div>
    <ul>
        <ng-container *ngFor="let data of jsonarray|keyvalue: originalOrder">
            <ng-container *ngIf="data.key !== id">
                <h5>{{data.key}}</h5>
                <ng-container *ngFor="let fields of data.value">
                    <li>{{fields.Order}}</li>
                </ng-container>
            </ng-container>
        </ng-container>
    </ul>
</div>

  <ul>
    <ng-container *ngFor="let item of jsonarray | keyvalue">
      <h5>{{item.key}}</h5>
      <li *ngFor="let subItem of item.value">
        {{subItem.Order}}
      </li>
    </ng-container>
  </ul>