Почему мое угловое приложение становится очень медленным после изменения данных на основе mat-tree?

Question

Я использую компонент дерева углов / материалов и у меня возникли некоторые проблемы. После сохранения изменений в дереве я сбрасываю данные на основе дерева (что работает), однако приложение становится невероятно медленным, расширение узлов может занять около 8 секунд.

Что делает это еще более странным, так это то, что код, который фактически манипулирует источником данных, запускается в других местах, таких как добавление нового дочернего элемента в дерево - мы хотим, чтобы пользовательский интерфейс обновлялся, и это не вызывает проблем. Только при сохранении приложение замедляется.

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);
}

EDIT:

Изменение дерева обновлений для создания совершенно нового источника данных решает медленную проблему (утечка памяти?), Но не добавление дочернего элемента не отображается в пользовательском интерфейсе. Несмотря на то, что ребенок находится на сплющенном дереве, его следует отображать.

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-поддержка. довольно стандартный.

       <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>

Answer 1

Мне потребовалось несколько часов, чтобы заставить его работать, но вот изменение, которое я сделал:

// 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