角树表

时间:2018-05-16 11:01:07

标签: angular tree treetable

我已经实现了一个树组件,它接收嵌套数据并在UI上递归呈现。

<tr *ngFor="let node of nodes" style="width:100%">
<td>
    <span *ngIf="node[key].length" [ngClass]="node.isVisible ? 'fa fa-minus col-mr-5':'fa fa-plus col-mr-5'" (click)="toggle(node)">
    </span>
</td>
<td>
    {{node.Name}}
    <div id="expanded-data-nodes" *ngIf="node.isVisible">
        <table id="nested-table">
            <tree-table *ngIf="node[key].length" [key]="key" [data]="node[key]"></tree-table>
        </table>
    </div>
</td>

<td>{{node.Age}}</td>
<td>{{node.Gender}}</td>
<td>{{node.Country}}</td>

public toggleChildren(data: any) {
    data.isVisible = !data.isVisible;
}

我希望默认情况下扩展树表的所有节点。

我尝试从div中删除* ngIf =“item.isVisible”,它会在加载时默认扩展所有行,但是,展开折叠确实有效,我可以将所有图标视为fa-plus。

0 个答案:

没有答案