angular / angular/components

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

Đang mở
#11,400 13 bình luận 10 reaction 0 người được giao Xem trên GitHub
area: material/tree P4
Ngôn ngữ chính
TypeScript
Star
25k
Fork
6.8k
Merge trung bình
1 ngày 8 giờ
Pull request đã merge (30 ngày)
91

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu với ví dụ mat-tree checkboxes và tệp app/tree-checklist-example.ts của ví dụ đó, đặc biệt là descendantsAllSelected. Tái hiện sự không khớp bằng cách chọn một mục cha rồi chọn tất cả các mục con của nó, sau đó so sánh các hộp kiểm được hiển thị với checklistSelection.selected. Hoàn tất có nghĩa là ví dụ duy trì tính nhất quán giữa hai biểu diễn đó; hãy xác minh hành vi trong ví dụ tài liệu.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, typescript
Lĩnh vực
frontend
Loại issue
Lỗi
Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Đặc tả rõ ràng
Mức phù hợp với người mới
55/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.