Question

我有一个数组：

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>

Answer 1

您需要以递归方式从数组中提取属性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>

看看this StackBlitz的插图。

Answer 2

定义一个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>

使用ngFor将嵌套对象显示到表中的数组

2 个答案: