Есть ли способ создать мат-дерево из базы данных? - PullRequest
Новая
       5

Есть ли способ создать мат-дерево из базы данных?

0 голосов
/ 23 октября 2019

В настоящее время я работаю над проектом с использованием угловых и Spring-фреймворков. Мне нужно создать вложенное дерево (mat-tree из Angular Material) из моей базы данных, а не из статической таблицы json в компоненте. Я знаю, как получить нужные данные, но я не могу понять, как их использовать для создания дерева.

Я использовал этот пример углового материала https://stackblitz.com/angular/bevqmbljkrg, и хотел быиспользовать мои данные базы данных вместо TREE_DATA. Любая помощь будет принята с благодарностью!

Данные, которые я получаю (с сервисной функцией), имеют этот формат

, но мне нужно только отобразить «имя» и «description "

Дело в том, что я буду использовать это дерево в качестве фильтра для различных сценариев (также используя флажки). Структура должна быть такой:

Сценарии Описание - описание1 - описание2 - описание3

Имя - имя1 - имя2 - имя3

1 Ответ

0 голосов
/ 23 октября 2019

Первый шаг заключается в том, что вам нужно написать внутреннюю функцию или (API), чтобы эта внутренняя функция возвращала данные в той же структуре (иерархии), которая показана в TREE_DATAПозвольте мне сказать, что каждый узел в дереве является elem объектом, каждый elem объект имеет свойства id, name, children:Item[]

Функция должна возвращать массив элементов Item[]. Итак, прототип функции: 

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

Второй шаг - это вызов функции (API), которую вы написали ранее в шаге 1, из углового приложения с использованием get http request & service. Вы найдете много ресурсов по этой теме, ниже приведен только пример кода, который поможет вам понять: 

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

Последний шаг - внедрение службы в ваш компонент и подпишитесь на функцию, которую вы написали на предыдущем шаге, вот так: 

 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 позже, если хотите.

, пожалуйста, прокомментируйте ниже, если что-то не понятно.

...