angular / angular/components

help(Tree): TreeControl selection model doesn't work for immutable data

Ouverte
#21,422 4 commentaires 2 réactions 0 personnes assignées Voir sur GitHub
area: cdk/collections P3
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

Please see this - https://stackoverflow.com/q/65412659/2896495.

I needed a dynamically loading nodes in the angular material tree, so I created my own `GeoDataSource` which internally uses **_@ngrx/component-store_** to handle all the interaction between data source, TreeControl and the tree itself.

Now, the problem is the tree doesn't keep its expansion state because the `abstract class BaseTreeControl` uses `SelectionModel` class and this in turn uses `Set` to keep track of items that are selected. So if node is expanded it just does this:
```
this._selection.add(value); // Set.add(value)
```

When using immutable data (from the component store) those items are always new.

I tried to use `trackBy` optional function:
```
this.treeControl = new FlatTreeControl(
(node) => node.nodeLevel,
(node) => node.expandable, {
trackBy: (node) => node.groupPath // *** groupPath is string (it's an ID) ***
}
);
```

and for this I had to change `FlatTreeControl` to `FlatTreeControl`, otherwise it doesn't compile. But then I got the following error in the **_template_**:

> Type 'FlatTreeControl' is not assignable to type 'TreeControl'

Here's the template:
```

```

Now what? How do I make all this work with immutable data from the store?

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par lire BaseTreeControl et SelectionModel, puis comparez le générique trackBy de FlatTreeControl avec le type TreeControl attendu par le modèle mat-tree. Reproduisez le cas de données immuables décrit dans l’issue et vérifiez que l’état d’expansion persiste lors du remplacement des nœuds, tandis que les types du modèle restent compatibles.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Bug
Difficulté
5/5
Temps estimé
Plus d'une semaine
Activité
À l'abandon
Clarté
À clarifier
Accessibilité débutants
25/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.