Блог

Мне нужен был динамически загружаемый узел в angular material tree, поэтому я создал свой собственный GeoDataSource , который внутренне использует @ngrx /component-store для обработки всего взаимодействия между источником данных, TreeControl и самим деревом.

Теперь проблема в том, что дерево не сохраняет свое состояние расширения, потому abstract class BaseTreeControl<T, K = T> что использует SelectionModel<T> класс, а это, в свою очередь, используется Set<T> для отслеживания выбранных элементов. Поэтому, если узел расширен, он просто делает это:

 this._selection.add(value); // Set<T>.add(value)
 

При использовании неизменяемых данных (из хранилища компонентов) эти элементы всегда являются новыми.

Я попытался использовать trackBy необязательную функцию:

     this.treeControl = new FlatTreeControl<SomeEntityFlatNode, string>(
      (node) => node.nodeLevel,
      (node) => node.expandable, {
        trackBy: (node) => node.groupPath // *** groupPath is string (it's an ID) ***
      }
    );
 

и для этого мне пришлось перейти FlatTreeControl<SomeEntityFlatNode> на FlatTreeControl<SomeEntityFlatNode, string> , иначе он не компилируется. Но затем я получил следующую ошибку в шаблоне:

Тип ‘FlatTreeControl<SomeEntityFlatNode, string>’ не может быть присвоен типу ‘TreeControl<SomeEntityFlatNode, SomeEntityFlatNode>’

Вот шаблон:

 <mat-tree *ngIf="hasData$ | async" [dataSource]="geoDataSource" [treeControl]="treeControl">
</mat-tree>
 

И что теперь? Как мне заставить все это работать с неизменяемыми данными из хранилища?

Я решил, что мне нужно использовать trackBy функцию для TreeControl, чтобы заставить ее работать. Но в настоящее время есть ошибка (на момент написания), которая не позволяет мне это сделать. Однако грядет исправление!