Question

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

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

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

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

问题是，我将把这棵树用作不同情况的过滤器（也使用复选框）。结构应如下所示：

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

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

Answer 1

第一步是，您需要编写一个后端函数或（API），该后端函数应以与{{中所示的相同结构（层次结构） 1}}，让我说树中的每个节点都是@override Widget build(BuildContext context) { print('=========================================='); print(_userTransactionLists.length); return Column( children: _userTransactionLists.map((tx) { print(tx.name); return Text(tx.name); }).toList(), ); }对象，每个TREE_DATA对象都具有属性elem

该函数必须返回项elem的数组。所以功能原型是：

id, name, children:Item[]

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

<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

对不起，您还没有创建演示，但对您来说应该可以正常工作。另外，如果需要，您可以稍后使用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`); } }来增强代码和性能。

如果不清楚，请在下面发表评论。

有没有一种方法可以从数据库中生成mat-tree？

1 个答案: