Comment utiliser ng2-tree avec un contenu 100% dynamique?

Question

Je construis une interface utilisateur avec deux instances de ng2-tree, chacune avec un nœud racine différent. La racine doit être extraite de la base de données et tous les nœuds enfants doivent être récupérés uniquement lorsque l'utilisateur développe chaque élément.

J'essayé de placer le noeud racine à une valeur temporaire, puis le remplacer sur INIT:

tree: TreeModel = { value: "Loading..." }; 
ngOnInit() { 
    this.itemService 
     .getProject(this.root) 
     .subscribe((item) => this.tree = new ItemTreeNode(this.itemService, 'root', item) }); 
} 

Cette seule la moitié a travaillé: le nom et l'icône du nœud racine est apparu, mais le carat pour me permettre pour l'agrandir n'a jamais fait.

J'essayé de faire un nœud racine statique, avec l'idée que je me cachais, et auto-expand pour aller chercher le nœud racine REAL:

tree: TreeModel = this.rootNode(); 
rootNode(): TreeModel { 
    var self = this; 
    return { 
    id: 'root', 
    value: 'root', 
    loadChildren(callback) { 
     self.itemService 
      .getProject(self.root) 
      .subscribe(
      (item) => { 
       var node = new ItemTreeNode(self.itemService, 'root', item); 
       callback([ node ]); 
      }, 
      (error) => { console.log(error); } 
     ); 
    }, 
    settings: { ... } 
    }; 
} 

Cela m'a donné un nœud racine que je pouvais développer. Quand je l'ai fait, j'ai vu le vrai nœud racine que je voulais. Cependant, cela ne me laissera pas me développer. De plus, je n'arrive pas à comprendre comment développer automatiquement le nœud racine temporaire une fois que je le cache. Donc, ma question est: quelle est la bonne façon de remplir un ng2-tree où le nœud racine est chargé de manière asynchrone? Ma première approche aurait-elle fonctionné?

Et pourquoi ne puis-je pas continuer à développer les enfants des enfants dynamiquement chargés? Ai-je fait quelque chose de mal dans ma classe ItemTreeNode?

import { TreeModel,TreeModelSettings } from 'ng2-tree'; 
import { Item }  from '../model/item'; 
import { ItemService } from '../shared/item.service'; 

export class ItemTreeNode implements TreeModel { 
    value: string; 
    id: string; 
    children: Array<ItemTreeNode>; 
    icon: string; 
    settings: TreeModelSettings; 

    constructor(
    private itemService: ItemService, 
    private parent_id: string, 
    private item: Item 
){ 
    this.id = this.parent_id + '::' + this.item.id; 
    this.value = this.item.nodeName(); 
    this.icon = this.item.icon(); 
    this.settings = { 
     templates: { 
     node: `<i class="fa fa-fw fa-lg ${this.item.icon()}"></i>`, 
     leaf: `<i class="fa fa-fw fa-lg ${this.item.icon()}"></i>`, 
     leftMenu: '' 
     }  
    }; 
    } 

    loadChildren(callback) { 
    this.itemService.getChildrenOf(this.item.id).subscribe(
     (response) => { 
     var list = response.map((item) => 
      new ItemTreeNode(this.itemService, this.id, item) 
     ).sort((a,b) => { 
      var x = a.value; 
      var y = b.value; 
      return (x < y ? -1 : x > y ? 1 : 0); 
     }); 
      callback(list); 
     }, 
     (error) => { console.log(error) } 
    ); 
    } 

} 

Answer 1

Oui, j'ai fait quelque chose de mal dans mon ItemTreeNode.

Le code, tel qu'il est écrit, définit loadChildren() sur le prototype pour l'objet. Le ng2-tree ne regarde pas le prototype, il regarde l'objet lui-même. Je pense que l'on pourrait faire valoir que c'est un bug. Mais le travail autour était assez facile une fois que je compris ce qui était à l'origine il:

Il suffit de déplacer la logique dans le constructeur et l'attacher directement à l'objet, comme suit:

this.loadChildren = (callback) => { ... }