有没有一种方法可以从数据库中生成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屋!