为什么 *ngFor 不以正确的顺序显示 html 表格行？

Question

我想通过表格显示数据结构。数据结构如下：

table-st.component.ts

import { Component, OnInit, Input, Inject } from "@angular/core";
import { DTO } from "@core/dto";

@Component({
  selector: "table-st",
  templateUrl: "./table-st.component.html",
  styleUrls: ["./table-st.component.scss"],
})
export class TableStComponent implements OnInit {
  table: DTO.Table = = JSON.parse(`{ 
    "properties": [
      {
        "type": "java.lang.String",
        "id": "Project"
      },
      {
        "type": "java.lang.String",
        "id": "Description"
      },
      {
        "type": "java.lang.Double",
        "id": "Amount of..."
      }
    ],
    "tree": {
          "children": [
            {
              "children": null,
              "data": [
                "Lorem Ipsum",
                "Lorem Ipsum",
                1,
                0,
                "Lorem Ipsum",
                "2421123",
                "Lorem Ipsum",
                null
              ],
              "itemId": "2135324123"
            },
            {
              "children": null,
              "data": [
                "23412321",
                "Lorem Ipsum",
                1,
                0,
                "Lorem Ipsum",
                "42412313",
                "Lorem Ipsum",
                null
              ],
              "itemId": "432351312"
            },
            {
              "children": null,
              "data": [
                "3412312421",
                "Lorem Ipsum",
                1,
                14,
                "Lorem Ipsum",
                "75634532",
                "Lorem Ipsum",
                null
              ],
              "itemId": "98765334"
            },
            {
              "children": null,
              "data": [
                "7463525",
                "Lorem Ipsum",
                1,
                0,
                "Lorem Ipsum",
                "6874645",
                "Lorem Ipsum",
                null
              ],
              "itemId": "363452345"
            }
          ],
          "data": [
            "34523234",
            "Lorem Ipsum",
            4,
            14,
            null,
            null,
            null,
            "Lorem Ipsum"
          ],
          "itemId": "345345"
        }
    }
  `);
  ngOnInit(){
  }
}

我想在我的 html 中显示这个结构

table-st.component.html

<table>
        <thead>
            <tr>
                <th *ngFor="let property of table.properties">{{property.id}}</th>
            </tr>
        </thead>
        <tbody>

            <!-- Iterate over the parents and differ in 2 cases -->
            <ng-container *ngFor="let entry of table.tree.children">

                <!-- Case 1: Element has no children. Display just the parent -->
                <ng-template *ngIf="!entry.children; else hasChildren">
                    <tr *ngFor="let entryData of entry.data">
                        <td>{{entryData}}</td>
                    </tr>
                </ng-template>

                <!-- Case 2: Element has children. Display parent element and children -->
                <ng-template #hasChildren>
                    <tr>
                        <td *ngFor="let entryData of entry.data">{{entryData}}</td>
                    </tr>
                        <tr *ngFor="let children of entry.children" class="child">
                            <td *ngFor="let child of children.data">{{child}}</td>
                        </tr>
                </ng-template>
            </ng-container>
        </tbody>
    </table>

但顺序是相反的。首先是孩子，然后是父母。像这样：

• 儿童 1.1
• 儿童 1.2
• 父 1
• 子 2.1
• 子 2.2
• 父 2

如何才能按顺序正确显示？

Answer 1

我想在 StackBlitz 中重现最小的可重现示例，但在这样做时我实际上发现了错误。事实上，这都是关于插入数据的。我将关闭这个问题。但是非常感谢您提供帮助:)