angular / angular/components

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

オープン
#11,400 コメント 13 件 リアクション 10 件 担当者 0 名 GitHub で見る
area: material/tree P4
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

#### 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;
}
```

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

mat-tree checkboxes の例とその app/tree-checklist-example.ts ファイル、特に descendantsAllSelected から始めます。親を選択してからそのすべての子を選択して不一致を再現し、表示されるチェックボックスと checklistSelection.selected を比較します。例でこの 2 つの表現が一貫していれば完了です。ドキュメントの例で動作を確認してください。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
frontend
issue の種類
バグ
難易度
2/5
見積もり時間
1〜3時間
活発さ
停滞
明瞭さ
明確に書かれている
初心者へのやさしさ
55/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。