如何在angular 8中将object数组的键操作为ngfor

我有一个对象数组，需要根据静态html使用ngFor进行操作。我已经尝试过了，但没有工作，所以我发表了评论。“mainitem”的值将作为标题出现，“Seconditem”的键将出现在li标记中。下面是代码和演示

app.component.html

---

我对此不确定，我发现您的代码中存在一些问题，如：

<li *ngFor="let subItem of item.value">
  {{subItem.Order}}
</li>

---

以下是一个可以使用的模板：

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

{{item.mainitem}

{{subItem.key}}-{{subItem.value}

---

链接到working stackblitz:

试试这个。我提供了两个用于渲染内部li的选项。你可以选择一个适合你需要的

HTML

{{item.mainitem}

{{item.Seconditem[key]}




{{value}}

<li *ngFor="let subItem of item.value">
  {{subItem.Order}}
</li>

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

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