有没有一种方法可以从数据库中生成mat-tree? [英] Is there a way to generate a mat-tree from a Database?

问题描述

我目前正在使用Angle和Spring框架进行项目.我需要从数据库而不是从组件中的静态json表生成嵌套树(来自Angular Material的mat-tree). 我知道如何获取所需的数据，但是我不知道如何使用它来生成树.

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.

我使用了这个有角度的材料示例 https://stackblitz.com/angular/bevqmbljkrg ，我想使用我的数据库数据而不是TREE_DATA. 任何帮助将不胜感激！

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!

我(通过服务功能)获得的数据采用这种格式

但是我只需要显示名称"和描述"

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:

场景 描述 -description1 -说明2 -description3

Scenarios Description - description1 - description2 - description3

名称 -名称1 -名称2 -名称3

Name - name1 - name2 - name3

推荐答案

第一步是，您需要编写一个后端函数或(API)，该后端函数应返回数据与TREE_DATA中所示的结构(层次结构)相同，我可以说树中的每个节点都是elem对象，每个elem对象都具有属性id, name, children:Item[]

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[]

该函数必须返回项Item[]的数组. 所以Function原型是:

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'},
            ]},
        ];
    }
]

第二步是使用get http请求和应用程序从角度应用程序调用您在Step1中之前编写的函数(API).服务.您将在该主题上找到很多资源，下面仅是一个示例代码，可帮助您了解这一点:

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.
       }
    );
  }

很抱歉，您没有创建演示，但对您来说应该可以正常工作. 另外，您可以增强代码&如果愿意，可以稍后使用angular resolvers来提高性能.

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.

这篇关于有没有一种方法可以从数据库中生成mat-tree?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！