angular / angular/components

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

Abierto
#21,422 4 comentarios 2 reacciones 0 asignados Ver en GitHub
area: cdk/collections P3
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

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?

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comience leyendo BaseTreeControl y SelectionModel; después, compare el genérico trackBy de FlatTreeControl con el tipo TreeControl que espera la plantilla mat-tree. Reproduzca el caso de datos inmutables del issue y verifique que el estado de expansión persista al reemplazar los nodos, mientras los tipos de la plantilla siguen siendo compatibles.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, typescript
Área
frontend
Tipo de issue
Error
Dificultad
5/5
Tiempo estimado
Más de una semana
Estado de actividad
Estancado
Claridad
Necesita aclaración
Aptitud para principiantes
25/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.