Is there a way to generate a mat-tree from a Database?

问题

I am currently working on a project using angular and Spring frameworks. I need to generate a nested Tree (mat-tree from Angular Material) from my database, and not from a static json table in the component. I know how to get the data I want, but I can't figure out how to use it in order to generate the tree.

I used this angular material example https://stackblitz.com/angular/bevqmbljkrg, and I would like to use my Database data instead of TREE_DATA. Any help would be much appreciated!

The data I get (with a service function) is in this format

but I only need to display "name" and "description"

The thing is that i will use this tree as a filter for different scenarios (using checkboxes as well). The structure should be like this:

Scenarios Description - description1 - description2 - description3

Name - name1 - name2 - name3

回答1:

The first step is that You need to write a back-end function or (API), that back-end function should return the data in the same structure (hierarchy) shown in the TREE_DATA, let me say that each node in the tree is elem object, each elem object has properties id, name, children:Item[]

The function must return an array of items Item[]. So Function prototype is:

<Item[]> getMyTreeData(){
  // 1- Fetch the tree data from the DB.
  // 2- Convert your data to the appropirate structure accepted by angular material
  // 3- return the data

}

    // I wrote the algorithm to convert your data in typescript, you need to use the syntax of your backend programming langauge
    // you should be fine with that

    let tree_data: any = []; // this will be array of objects 
    // collect all the descriptions and names nodes form the data array
    let descrptions: any = [];
    let names:any = [];
    Scenarios.forEach(elem => {  // Scenarios are the data array you posted in yout question
        let description_node: any = {
            name: elem.description
        }
        descrptions.push(description_node);

        let name_node: any = {
            name: elem.name
        }
        names.push(name_node);
    });

    let root_obj: any = {
        name: 'Scenarios ',
        children: [
            { name: 'Description' , children: descrptions},
            { name: 'Name ' , children: names},
        ]
    };
tree_data.push(root_obj);

// then you need to convert the root_obj to JSON format according to your programing language  
// that's it..
// the result of printing the root_obj should be:
[
    {
        name: 'Scenarios',
        children: [
            { name: 'Description' , children: [
                {name: 'Description1'},
                {name: 'Description2'},
                {name: 'Description3'},
            ]},
            { name: 'Name' , children: [
                {name: 'Name1'},
                {name: 'Name2'},
                {name: 'Name3'},
            ]},
        ];
    }
]

The Second Step is to call the function (API) you wrote before in the Step1 from angular application using get http request & service. you will find a lot of resource on this topic, below is only a sample code to help you get the idea:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class ApiService {


  constructor() { }

  getTreeData(){
     return this.http.get(`your api url goes here`);
  }
}

The Final Step is to inject the service into your component and subscribe to the function you wrote in the previous step, just like this:

 constructor(public api: ApiService ) { // don't forget to import the ApiService into your component
  // subscribe to get the data
   this.api.getTreeData().subscribe(
     data => {
       this.dataSource.data = data; // after reaching to this poin, angular will render your data automaticly instead of the example data.
       }
    );
  }

sorry for not creating a demo, but that should work fine for you. plus you can enhance the code & performance by using angular resolvers later if you wanted to.

please comment below if something is not clear.

来源：https://stackoverflow.com/questions/58519241/is-there-a-way-to-generate-a-mat-tree-from-a-database