Итерация многомерного массива с ngFor

Question

У меня есть такой набор данных:

   [
        {
            prop1: "",
            prop2: "",
            child: [
                prop1: "",
                prop2: "",
                    child: [
                    ...
                    ]
            ]
        },
        {
            prop1: "",
            prop2: "",
            child: [
                prop1: "",
                prop2: "",
                    child: [
                    ...
                    ]
            ]
        }
    ],
[
        {
            prop1: "",
            prop2: "",
            child: [
                prop1: "",
                prop2: "",
                    child: [
                    ...
                    ]
            ]
        },
        {
            prop1: "",
            prop2: "",
            child: [
                prop1: "",
                prop2: "",
                    child: [
                    ...
                    ]
            ]
        }
    ],

Это может go глубже навсегда, это не двумерный или трехмерный массив. Это N-мерный массив. Я думал о том, как правильно выполнить итерацию в HTML, но использование вложенного ngFor было бы самоубийством и даже невозможным, поскольку, как я уже сказал, я не знаю, сколько у меня будет вложенных детей.

Что мне нужно, так это древовидное представление этого набора данных.

Что может быть хорошим решением для этого?

Answer 1

Следуя решению @Noelmout, но получая более простой способ.

Идея состоит в том, чтобы установить рекурсивный компонент.
Поскольку набор данных, который вы только что показали, удовлетворяет шаблону типа {prop1: "", prop2: "", child: [...]} и скоро. Рассмотрим компонент для рекурсивного и типизированного рендеринга.

*. Ts

type Item = {
  prop1: string,
  prop2: string,
  child: Item[];
}

@Component({
  selector: 'item-display',
  templateUrl: './item-display.html',
  styleUrls: ['./item-display.component.scss']
})
export class ItemDisplayComponent {
  @Input() item: Item;
}

*. html

<div class="content">

    <div class="prop1">{{ item.prop1 }}</div>
    <div class="prop2">{{ item.prop2 }}</div>

    <div class="child" *ngFor="let c of item.child">
        <item-display [item]="c"></item-display>
    </div>

</div>

Теперь вы можете изменить что-либо в компоненте который будет применяться ко всем вложенным компонентам.
Еще больше, добавьте атрибут depth, если необходимо

...
@Input() depth: number = 0; // or 1, up to you

<item-display [item]="c" [depth]="depth + 1"></item-display>

И, наконец, поскольку у вас есть коллекция этих элементов, из вы root компонент

<div class="item-display" *ngFor="let item of rootItems">
    <item-display [item]="item"></item-display>
</div>

Нет необходимости устанавливать свойство глубины, поскольку оно имеет значение по умолчанию (и лучше не раскрывать это свойство, оно похоже на внутреннее поле, известное только по * 1024) *).

Answer 2

Вы можете использовать рекурсивный компонент, пусть он называется displayobject. Для каждого уровня компонент displayobject выводит список свойств, если свойство является строкой, то он отображает его, в противном случае он загружает новый компонент displayobject, который делает то же самое с данным объектом.

Шаблон:

<div *ngFor="let property of propertyList">

    <span *ngIf="isString(myObject[property])"> 
        {{ property }} 
    </span>

    <displayobject *ngIf="isObject(myObject[property])" [myObject]="myObject[property]">
    </displayobject>

</div>

Компонент:

import { Component, Input } from '@angular/core';

@Component({
    selector: 'displayobject',
    ...
})
export class DisplayObject {

    @Input() myObject;
    public propertyList = [];

    ngOnChanges() {
        this.propertyList = Object.keys(this.myObject);
    }
}

И вы называете это:

 <displayobject [myObject]="yourObject"></displayobject>