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>