Existe-t-il un moyen d'utiliser une arborescence de matériaux pour représenter des structures de données parent / enfant où l'enfant a une forme de données distincte de celle du parent? Mon expérience avec ce composant semble indiquer que la structure de données doit être une récursion du même type. Cependant, je voudrais l'utiliser pour représenter des structures telles que les commandes (parent) avec les articles de commande (enfants). Cela ne semble pas être un cas d'utilisation pris en charge. Est-ce correct?
J'utilise Angular depuis le déploiement de la v2 et j'utilise Angular Material depuis sa création. À mon avis, le composant Tree semble être le composant le plus encombrant avec le code le plus difficile à échantillonner.
3 Réponses :
Je suis tombé sur un problème similaire au travail vendredi soir, je n'étais pas satisfait du résultat, alors j'ai simulé un stackblitz qui pourrait répondre à vos besoins. Le lien de @ Jaikumar était utile - https://material.angular.io/cdk/tree/ api # NestedTreeControl .
Voir ce stackblitz modifié - https://stackblitz.com/angular/ lneeokqoxvm basé sur l'exemple matTree pour un exemple de travail.
La clé, à part la modification de l'interface pour l'adapter à une structure de données lâche, se trouvait dans NestTreeControl, la fonction à la fin semble être la propriété / function getChildren.
hasChild (_: number, node: FoodNode): boolean {
return (node.subChildren) ?
!!node.subChildren && node.subChildren.length > 0 :
!!node.children && node.children.length > 0;
}
modifié en:
interface FoodNode {
name: string;
children?: FoodNode[];
subChildren?: FoodNode[];
}
...
new NestedTreeControl<FoodNode>(node => {
return (node.children) ? node.children : node.subChildren;
});
La fonction hasChild à la fin de la classe doit permettre ajout de complexité aussi:
interface FoodNode {
name: string;
children?: FoodNode[];
}
...
new NestedTreeControl<FoodNode>(node => node.children)
Le double bang !! m'a fait trouver cette référence - https://medium.com/better-programming/javascript-bang-bang-i-shot-you-down-use-of-double-bangs-in-javascript-7c9d94446054 a >
J'espère que vous trouverez cela utile même si vous avez posé la question il y a des mois.
J'ai eu le même problème, la solution que j'ai choisie était de créer une structure aplatie juste pour le composant d'arbre. La structure a tous les champs du parent et de l'enfant (si le modèle est utilisé sur le parent, les champs enfants restent vides et opposés sur le nœud enfant). Cela semble très bien fonctionner.
De:
export interface TreeModel {
id: number;
name: string;
symbolName: string;
description: string;
}
à:
export interface ParentModel{
id: number;
name: string;
child: ChildModel[];
}
export interface ChildModel{
id: number;
symbolName: string;
description: string;
}
Je viens de rencontrer la même question et comme il n'y a pas d'exemple disponible, j'ai trouvé la solution suivante.
/**
* Any class that implements toString is now usable inside a tree
*/
export interface IString {
toString : () => string;
}
/**
* Node for to-do item
*/
export interface Node {
children? : Node[];
item : IString;
}
/** Flat to-do item node with expandable and level information */
export interface FlatNode {
item : IString;
level : number;
expandable : boolean;
}
Voir ici pour le Stackblitz: https://stackblitz.com/edit/angular-rwur5a
Avez-vous obtenu une réponse à cette question?
Non, malheureusement je n'ai pas
Avez-vous essayé cela? material.angular.io/cdk/tree/overview
cette question nécessite des vues sérieuses.