Angular 4-新列表 <ul> JSON数据在每个层次级别

Question

我在angular 4上工作。在我的组件中，我有json中的数据，并在list中显示。 不用担心。

我的问题是，对于每个级别“层次结构级别”，我都必须生成一个新的列表级别。 最多可以有6个级别。

我怎样才能做到这一点？

带有ts的ts文件

export class Flotte {
  flotte_id_rattachment: string;
  flotte_id: string;
  niveau_hierarchie: number;
}

const FLOTTES: Flotte[] = [
  {
    "flotte_id_rattachment": "MainFlotte",
    "flotte_id": "MainFlotte",
    "niveau_hierarchie": 0
  },
  {
    "flotte_id_rattachment": "MainFlotte",
    "flotte_id": "Flotte1",
    "niveau_hierarchie": 1
  },
  {
    "flotte_id_rattachment": "Flotte1",
    "flotte_id": "Flotte1_services",
    "niveau_hierarchie": 2
  },
  {
    "flotte_id_rattachment": "Flotte1",
    "flotte_id": "Flotte1_rent",
    "niveau_hierarchie": 2
  },
  {
    "flotte_id_rattachment": "Flotte1_services",
    "flotte_id": "Flotte1_services_2",
    "niveau_hierarchie": 3
  },
  {
    "flotte_id_rattachment": "Flotte1_services",
    "flotte_id": "Flotte1_services_3",
    "niveau_hierarchie": 3
  },
  {
    "flotte_id_rattachment": "Flotte1_services_2",
    "flotte_id": "Flotte2",
    "niveau_hierarchie": 4
  }
];

显示我当前列表的组件的html文件。

<ul class="test">
    <li *ngFor="let flotte of flottes">
        {{flotte.flotte_id}}
    </li>
</ul>

Answer 1

JSON数据格式实际上只有一个层次级别。

ul列表的级别必须基于“ niveau_hierarchie”。 如果值为0，则这是主列表。 如果值为1，则它是主列表的新列表级别，等等。

结合json数据生成的html应该如下所示：

<ul> 
    <li> Main Flotte </li> <!-- "niveau_hierarchie": 0 in JSON -->
    <ul>
        <li> Flotte 1 </li> <!-- "niveau_hierarchie": 1 in JSON -->
        <ul>
            <li> Flotte1_services </li> <!-- "niveau_hierarchie": 2 in JSON -->
            <ul>
                <li> Flotte1_services_2 </li> <!-- "niveau_hierarchie": 3 in JSON -->
                <ul>
                    <li> Flotte2 </li> <!-- "niveau_hierarchie": 4 in JSON -->
                </ul>
                <li> Flotte1_services_3 </li> <!-- "niveau_hierarchie": 3 in JSON -->
            </ul>
            <li> Flotte1_rent </li> <!-- "niveau_hierarchie": 2 in JSON -->
        </ul>
    </ul>
</ul>