angular / angular/components

feature request: Simplify MatTree setup

Ouverte
#11,446 2 commentaires 7 réactions 0 personnes assignées Voir sur GitHub
area: material/tree feature P3
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

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.