angular / angular/components

feature request: Simplify MatTree setup

Đang mở
#11,446 2 bình luận 7 reaction 0 người được giao Xem trên GitHub
area: material/tree feature P3
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:
feature request

#### What is the expected behavior?
To simlify matTree setup

#### What is the current behavior?
we use lots of codes to setup a flatten tree
```javascript
this.treeFlattener = new MatTreeFlattener(this.transformer, this.getLevel,
this.isExpandable, this.getChildren);
this.treeControl = new FlatTreeControl(this.getLevel, this.isExpandable);
this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);

this.database.dataChange.subscribe(data => {
this.dataSource.data = data;
});

getLevel = (node: TodoItemFlatNode) => node.level;

isExpandable = (node: TodoItemFlatNode) => node.expandable;

getChildren = (node: TodoItemNode): Observable => {
return ofObservable(node.children);
}

hasChild = (_: number, _nodeData: TodoItemFlatNode) => _nodeData.expandable;

hasNoContent = (_: number, _nodeData: TodoItemFlatNode) => _nodeData.item === '';
```

#### What are the steps to reproduce?
[official demo](https://run.stackblitz.com/api/angular/v1?file=app%2Ftree-checklist-example.ts)

#### What is the use-case or motivation for changing an existing behavior?
1. Convention over configuration
We should follow a convention rather than do too many configuration.
All tree datasource has the same property such as `children`, `level`, `expandable`
2. Proposal
```javascript
// to define a material tree interface
export interface MatTreeNode {
level: number;
expandable: boolean,
children: Array
}

// all tree nodes must implements tree data interface
export class MyTreeNode implements MatTreeNode {
// ... business logic
}

// only need to pass Array to setup tree component
this.treeDataSource = new MatTreeDataSource(Array);
```

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Angular 6.0.0
Material 6.0.0
Typescript 2.7.2

#### Is there anything else we should know?

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 bản demo tree-checklist chính thức và entry point app/tree-checklist-example.ts của nó, sau đó xem lại thiết lập MatTreeFlattener, FlatTreeControl và MatTreeFlatDataSource được mô tả trong issue. Công việc được xem là hoàn tất khi đã thống nhất và triển khai một API nguồn dữ liệu MatTree đơn giản hơn, loại bỏ các callbacks lặp lại nhưng vẫn giữ nguyên hành vi cây được minh họa.

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
Tính năng
Độ khó
5/5
Thời gian dự kiến
Hơn một tuần
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Cần làm rõ
Mức phù hợp với người mới
25/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.