angular / angular/components

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

Aperta
#21,422 4 commenti 2 reazioni 0 assegnatari Vedi su GitHub
area: cdk/collections P3
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

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?

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Iniziate leggendo BaseTreeControl e SelectionModel, quindi confrontate il generico trackBy di FlatTreeControl con il tipo TreeControl previsto dal template mat-tree. Riproducete il caso di dati immutabili descritto nell’issue e verificate che lo stato di espansione persista quando i nodi vengono sostituiti, mentre i tipi del template rimangono compatibili.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
frontend
Tipo di issue
Bug
Difficoltà
5/5
Tempo stimato
Più di una settimana
Stato di attività
Ferma
Chiarezza
Da chiarire
Idoneità per principianti
25/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.