Selection model in mat-tree with checkboxes example not matching displayed selection
- Vorherrschende Sprache
- TypeScript
- Sterne
- 25k
- Forks
- 6.8k
- Ø Merge
- 1 T. 8 Std.
- Gemergte PRs (30 T.)
- 91
Beschreibung
#### Bug, feature request, or proposal:
Bug in example code
#### What is the expected behavior?
Selection model in example should be consistent with selected items.
#### What is the current behavior?
When you select a parent tree item it shows up in the selection model, however if you select all of the items under a tree individually, the parent item will show as checked, but will not appear in the selection model.
#### What are the steps to reproduce?
see checkboxes example from documentation: https://material.angular.io/components/tree/examples or stackblitz clone: https://stackblitz.com/angular/nkmjydodvnp?file=app%2Ftree-checklist-example.html
to reproduce, click checkbox for a parent tree and view selectionmodel.selected
uncheck parent tree then check all child items, selection model will be different and not match display.
#### What is the use-case or motivation for changing an existing behavior?
To provide good examples with predictable behavior.
#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
angular material 6.02
#### Is there anything else we should know?
easily fixed by a small change to decendantsAllSelected method. see working fix:
https://stackblitz.com/angular/nkmjydodvnp?file=app%2Ftree-checklist-example.ts
code:
```typescript
descendantsAllSelected(node: TodoItemFlatNode): boolean {
const descendants = this.treeControl.getDescendants(node);
let allselected = descendants.every(child => this.checklistSelection.isSelected(child));
if (allselected)
this.checklistSelection.select(node);
else
this.checklistSelection.deselect(node);
return allselected;
}
```
Beitragsleitfaden
Rechercherichtung
Beginne mit dem mat-tree checkboxes example und der Datei app/tree-checklist-example.ts, insbesondere mit descendantsAllSelected. Reproduziere die Abweichung, indem du einen übergeordneten Eintrag und anschließend alle seine untergeordneten Einträge auswählst, und vergleiche die angezeigten Kontrollkästchen mit checklistSelection.selected. Die Aufgabe ist erledigt, wenn das Beispiel diese beiden Darstellungen konsistent hält; überprüfe das Verhalten im Dokumentationsbeispiel.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- angular, typescript
- Bereich
- frontend
- Issue-Typ
- Bug
- Schwierigkeit
- 2/5
- Geschätzter Aufwand
- 1-3 Stunden
- Aktivitätsstatus
- Veraltet
- Klarheit
- Klar beschrieben
- Anfängerfreundlichkeit
- 55/100