feature request: Simplify MatTree setup
- Langage dominant
- TypeScript
- Étoiles
- 25k
- Forks
- 6.8k
- Merge moyen
- 1 j 8 h
- PR mergées (30 j)
- 91
Description
#### 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?
Guide de contribution
Ouvrir le guide de contribution
Piste de recherche
Commencez par la démo officielle tree-checklist et son point d’entrée app/tree-checklist-example.ts, puis examinez la configuration de MatTreeFlattener, FlatTreeControl et MatTreeFlatDataSource décrite dans l’issue. Le travail est terminé lorsqu’une API de source de données MatTree plus simple, qui supprime les callbacks répétés tout en préservant le comportement de l’arbre présenté, a été convenue et implémentée.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- angular, typescript
- Domaine
- frontend
- Type d'issue
- Fonctionnalité
- Difficulté
- 5/5
- Temps estimé
- Plus d'une semaine
- Activité
- À l'abandon
- Clarté
- À clarifier
- Accessibilité débutants
- 25/100