Отображать вложенный объект в массив в таблице с помощью ngFor - PullRequest
Новая
       6

Отображать вложенный объект в массив в таблице с помощью ngFor

0 голосов
/ 28 июня 2019

У меня есть массив: 

fooData = [
    {value: 1, children: [{value: 2}, {value: 3}, {value: 4}, {value: 5}]},
    {value: 6, children: [{value: 7}, {value: 8}, {value: 9}, {value: 10, children: [{value: 11}]}]},
];

Без изменения массива, как отобразить его с помощью ngFor, чтобы получить встроенную таблицу, подобную этой: 

 <table>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
    <tr><td>4</td></tr>
    <tr><td>5</td></tr>
    <tr><td>6</td></tr>
    <tr><td>7</td></tr>
    <tr><td>8</td></tr>
    <tr><td>9</td></tr>
    <tr><td>10</td></tr>
    <tr><td>11</td></tr>
  </table>

Ответы [ 2 ]

0 голосов
/ 28 июня 2019

Определите элемент ng-template для отображения свойства value и используйте ng-container для рекурсивной активации того же шаблона для дочернего свойства. И я добавил код здесь . 

<table>
    <ng-container [ngTemplateOutlet]="common" [ngTemplateOutletContext]="{link:fooData}">
    </ng-container>
</table>

<ng-template #common let-link='link'>
    <ng-container *ngFor="let data of link">
        <tr>
            <td>{{data.value}}</td>
        </tr>
        <ng-container *ngIf="data.children" [ngTemplateOutlet]="common" [ngTemplateOutletContext]="{link:data.children}">
        </ng-container>
    </ng-container>
</ng-template>
0 голосов
/ 28 июня 2019

Вам нужно рекурсивно выдернуть из вашего массива свойство value.Как только вы это сделаете, у вас будет линейный массив, который вы можете циклически просматривать и отображать.

Вот ваша рекурсивная функция извлечения: 

function pluckRecursive(input, prop, collect) {
    collect = collect || [];

    if (_.isArray(input)) {
        _.forEach(input, function (value, key) {
            pluckRecursive(value, prop, collect);
        })    
    } else if (_.isObject(input)) {
        _.forEach(input, function (value, key) {
            if (key === prop) {
                collect.push(value);
            } else {
                pluckRecursive(value, prop, collect);
            }
        })    
    }

    return collect;
};

Используйте эту функцию для сбора ваших значений: 

arrayToDisplay: number[] = pluckRecursive(this.fooData, 'value');

Затем отобразите так: 

 <table>
    <tr *ngFor="let item of arrayToDisplay"><td>{{item}}</td></tr>
  </table>

Посмотрите на эту иллюстрацию StackBlitz.

...