使用 ngFor 在表格中显示嵌套对象到数组

Posted 2023-03-13

【中文标题】使用 ngFor 在表格中显示嵌套对象到数组

【英文标题】：Display nested object to array in table with ngFor

【发布时间】：2019-11-10 13:21:23

【问题描述】：

我有一个数组：

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>

【参考方案1】：

定义一个 ng-template 元素来显示 value 属性并使用 ng-container 为 children 属性递归激活相同的模板。我已经添加了代码here。

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

【讨论】：

10 的 11 个孩子的最后一个值呢？

@TSR 检查更新的答案。我会更新最简化的。

【参考方案2】：

您需要递归地从数组中提取属性value。一旦你有了它，你将拥有可以循环显示的线性数组。

这是你的递归 pluck 函数：

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>

看看this StackBlitz 插图。