有没有办法从数据库生成 mat-tree ? [英] Is there a way to generate a mat-tree from a Database?
问题描述
我目前正在使用 angular 和 Spring 框架开展一个项目.我需要从我的数据库中生成一个嵌套树(来自 Angular Material 的 mat-tree),而不是从组件中的静态 json 表中生成.我知道如何获取我想要的数据,但我不知道如何使用它来生成树.
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:
场景描述- 描述1- 说明2- 描述3
Scenarios Description - description1 - description2 - description3
姓名- 姓名 1- 姓名 2- name3
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[]
.所以函数原型是:
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 request & 从 Angular 应用程序调用您之前在 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屋!