Question

我正在尝试将此AngularJS 1 demo中的展开/折叠功能重现到我的Angular 2应用程序中（我正在使用递归视图），但我的尝试总是会导致扩展超过1个节点。

如何在Angular 2中实现正确的扩展/折叠功能？

这是我目前的代码：

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

@Component ({
    selector: 'tree-view',
    template: `
    <ul>
        <li *ngFor="let node of treeData">
            <span *ngIf="node.children?.length" (click)="toggleChildren()">[+]</span>
            {{node.name}}
            <tree-view [treeData]="node.children"></tree-view>
        </li>
    </ul>
    `
})
export class TreeView {
    @Input() treeData: any[];

    toggleChildren() {
      // to do
    }
}

这是一个包含所有内容的Plunker：http://plnkr.co/edit/KmLDb1ba3WYp3X6snnmg?p=preview

Answer 1

向节点添加属性以检查它们是否可见。如果他们出现了他们，如果没有他们隐藏他们。

这是一个如何实现它的简单示例。您可能希望在节点可见时更改[+]的图标[-]来改进它。

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

@Component ({
    selector: 'tree-view',
    template: `
    <ul>
        <li *ngFor="let node of treeData">
            <span *ngIf="node.children?.length" (click)="toggleChildren(node)">[+]</span>
            {{node.name}}
            <tree-view [treeData]="node.children" *ngIf="node.visible"></tree-view>
        </li>
    </ul>
    `
})
export class TreeView {
    @Input() treeData: any[];


    toggleChildren(node: any) {
      // to do
      node.visible = !node.visible;

    }
}

如何在Angular 2中展开/折叠递归树视图？

1 个答案: