无法使树在Angular中全部展开

时间:2018-09-26 03:49:25

标签: angular

嗨,我正在从事Angular 5项目。我的网页中有多棵树。我想在树加载时默认扩展所有节点。下面是我的树。

@ViewChild(TreeComponent)
public treecreate: TreeComponent;

@ViewChild(TreeComponent)
public treedelete: TreeComponent;

@ViewChild(TreeComponent)
public treeupdate: TreeComponent;

@ViewChild(TreeComponent)
public treeread: TreeComponent;

下面是我的html实现。

   <tab *ngFor="let tabz of tabs" [heading]="tabz.title">
                                        <div *ngIf="tabz.title ==='CREATE'">
                                            <tree-root #treecreate
                                                       [nodes]="tabz.content"
                                                       [options]="options" (updateData)="onUpdateData($event)">

                                                <ng-template #treeNodeTemplate let-node="node" let-index="index">
                                                    <input type="checkbox" (change)="toggle($event.target,node,tabz.title)"
                                                           [checked]="node.data.checked" id="cbcreate">
                                                    {{ node.data.name }}
                                                </ng-template>
                                            </tree-root>
                                        </div>
                                        <div *ngIf="tabz.title==='DELETE'">
                                            <tree-root #treedelete
                                                       [nodes]="tabz.content"
                                                       [options]="options">

                                                <ng-template #treeNodeTemplate let-node="node" let-index="index">
                                                    <input type="checkbox" (change)="toggle($event.target,node,tabz.title)"
                                                           [checked]="node.data.checked" id="cbdelete">
                                                    {{ node.data.name }}
                                                </ng-template>
                                            </tree-root>
                                        </div>
                                        <div *ngIf="tabz.title==='UPDATE'">
                                            <tree-root #treeupdate
                                                       [nodes]="tabz.content"
                                                       [options]="options">

                                                <ng-template #treeNodeTemplate let-node="node" let-index="index">
                                                    <input type="checkbox" (change)="toggle($event.target,node,tabz.title)"
                                                           [checked]="node.data.checked" id="cbupdate">
                                                    {{ node.data.name }}
                                                </ng-template>
                                            </tree-root>
                                        </div>

                                        <div *ngIf="tabz.title==='READ'">
                                            <tree-root #treeread
                                                       [nodes]="tabz.content"
                                                       [options]="options">

                                                <ng-template #treeNodeTemplate let-node="node" let-index="index">
                                                    <input type="checkbox" (change)="toggle($event.target,node,tabz.title)"
                                                           [checked]="node.data.checked" id="cbread">
                                                    {{ node.data.name }}
                                                </ng-template>
                                            </tree-root>
                                        </div>
                                    </tab>

以下代码用于负载节点。

addrule(){
     this.arrayTabs.forEach(eachObj => {
                if (eachObj == "CREATE") {
                    this.tabs.push({
                        title: eachObj,
                        active: false,
                        content: this.createnode
                    });
                }
                if (eachObj == "UPDATE") {
                    this.tabs.push({
                        title: eachObj,
                        active: false,
                        content: this.updatenode
                    });
                }
                if (eachObj == "DELETE") {
                    this.tabs.push({
                        title: eachObj,
                        active: false,
                        content: this.deletenode
                    });
                }
                if (eachObj == "READ") {
                    this.tabs.push({
                        title: eachObj,
                        active: false,
                        content: this.readnode
                    });
                }
            })
    }
}

我尝试默认扩展所有节点。我尝试如下。

 this.treecreate.treeModel.expandAll();

这引发错误,无法读取treemodel的未定义属性

有人可以帮助我解决此问题吗?任何帮助,将不胜感激。谢谢。

0 个答案:

没有答案