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

Question

I work on angular 4. In my component, I have data in json which I display in list . No worries for that.

My problem is that for each level "hierarchy level", I have to generate a new list level . There can be up to 6 levels.

How can I do that?

The ts file with json

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
  }
];

The html file of the component that displays my current list.

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

Answer 1

There is actually only one hierarchical level in the JSON data format.

The level of the ul lists must be based on "niveau_hierarchie". If the value is 0, this is the main list. If the value is 1, it is a new list level of the main list etc ...

The html generated in connection with the json data should look like this:

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