angular / angular/components

Selection model in mat-tree with checkboxes example not matching displayed selection

Offen
#11,400 13 Kommentare 10 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/tree P4
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

Beitragsleitfaden öffnen

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

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.