在更改支持垫树的数据后，为什么我的角度应用程序会变得非常慢? [英] Why is my angular app becoming very slow after changing the data backing a mat-tree?

问题描述

我正在实现角度/材质树组件，并且遇到了一些问题.保存对树的更改后，我正在重置支持树的数据(它可以工作)，但是应用程序变得异常缓慢，扩展节点可能需要8秒钟.

I am implementing the angular/material tree component and having some problems. After saving changes to the tree I am resetting the data backing the tree (which works) however the app then becomes incredibly slow, expanding nodes can take about 8 seconds.

让这更奇怪的是，实际上操纵数据源的代码在其他地方运行，例如向树中添加新的子级-我们希望更新UI，这不会造成问题.只有在保存时，应用程序才会变慢.

What makes this even weirder is that the code that actually manipulates the data source is run in other places, such as adding a new child to the tree - we want the UI to update, and this does not cause a problem. It is only when saving that the app becomes slow.

save(): void {
    const trees = this.flattenedTree.filter(node => this.isRootNode(node));

    this.serviceThatHasNoSideEffects.save(trees)
        .then(result => {
            this.tree = result;
            this.flattenedTree = this.getFlattenedTree();
            this.refreshTree();
        });
}

private refreshTree() {
    const data: any[] = this.flattenedTree
        .filter(x => this.isRootNode(x))
        .filter(x => x.children.length > 0 || x.id === this.focusId);

    this.nestedDataSource.data = null;
    this.nestedDataSource.data = data;

    const focusNode = this.getNode(this.focusId);
    this.nestedTreeControl.expand(focusNode);
}

private addChild(parentNode: any, childNode: any) {
    if (!this.getNode(parentNode)) {
        this.flattenedTree.push(parentNode);
    }

    if (!this.getNode(childNode)) {
        this.flattenedTree.push(childNode);
    }

    parentNode.children.push(childNode);

    this.refreshTree();
    this.nestedTreeControl.expand(parentNode);
}

更改刷新树以创建全新的数据源可解决缓慢的问题(内存泄漏?)，但不会在UI中添加未显示的子对象.尽管孩子在展平的树上，但是应该显示出来.

changing refresh tree to create a completely new data source solves the slow issue (memory leak?) but not adding a child isnt displaying in the UI. Although the child is there on the flattened tree so should be displayed.

private refreshTree() {
    const data: any[] = this.flattenedTree
        .filter(x => this.isRootNode(x))
        .filter(x => x.children.length > 0 || x.id === this.focusId);

        this.nestedDataSource = new MatTreeNestedDataSource<theTreeType>();
    this.nestedDataSource.data = data;

    const focusNode = this.getNode(this.focusId);
    this.nestedTreeControl.expand(focusNode);
}

这是支持它的html.非常标准.

here is the html backing it. pretty standard.

       <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
            <li class="mat-tree-node">
                <button mat-icon-button disabled></button>
                {{node.uniqueName}}
            </li>
        </mat-tree-node>

        <!--when has nested child-->
        <mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
            <li>
                <div class="mat-tree-node">
                    <button mat-icon-button matTreeNodeToggle>
                        <mat-icon>
                            {{nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
                        </mat-icon>
                    </button>
                    {{node.uniqueName}}
                </div>
                <ul [class.invisible]="!nestedTreeControl.isExpanded(node)">
                    <ng-container matTreeNodeOutlet></ng-container>
                </ul>
            </li>
        </mat-nested-tree-node>
    </mat-tree>

推荐答案

我花了几个小时才能使它工作，但这是我所做的更改:

it took me a few hours to get it working but here is the change I made:

// cdk tree that mat tree is based on has a bug causing children to not be rendered in the UI without first setting the data to null
this.nestedDataSource.data = null;
// mat-tree has some sort of memory leak issue when not instantiating a new MatTreeNestedDataSource which causes the app to become very slow
this.nestedDataSource = new MatTreeNestedDataSource<LocationHierarchyNodeDataModel>();
this.nestedDataSource.data = data;

我在这里发现的儿童陈列问题: https://github.com/angular/material2/Issues/11381

The displaying children issue I found here: https://github.com/angular/material2/issues/11381

这篇关于在更改支持垫树的数据后，为什么我的角度应用程序会变得非常慢?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！