как создать дерево из плоского массива, используя Angular

Question

Мне нужно показать дерево из плоского массива данных, используя Angular, и я открыт для использования любого пакета для визуализации дерева. как пользователь, я должен иметь возможность щелкнуть узел и узнать подробности, такие как идентификатор узла и заголовок. дерево должно разворачиваться при загрузке, но пользователи должны иметь возможность сворачивать родительские узлы, поскольку они wi sh. моя модель данных узла выглядит так:

export class Node {
    nodeID: number;
    title: string;
    parentNodeID: number;
}

, а мои данные выглядят так:

public Nodes: Node[] = [
    {
        nodeID: 1;
        title: parent1;
        parentNodeID: null;
    },
    {
        nodeID: 2;
        title: child1;
        parentNodeID: 1;
    },
    {
        nodeID: 3;
        title: child2;
        parentNodeID: 1;
    }
]

Answer 1

вам нужен рекурсивный алгоритм, который просматривает ваш плоский массив и сопоставляет parentNodeID с узлом для создания древовидной структуры, а затем использует компонент дерева, например angular -tree-component , для рендеринга вашего дерево. Я сделал демонстрацию на stackblitz. взгляните и дайте мне знать, помогло ли это. https://stackblitz.com/github/ramin-ahmadi/Flat-Tree

Answer 2

Существует множество пакетов, которые могут выполнить эту работу, например Этот . Я не пробовал, но мне кажется, что пользоваться им легко. Если можете, измените ключи в своем массиве. В противном случае просто сопоставьте свои элементы с другим массивом, например:

const newArray = array.map(item =>({
      id: item.nodeID,
      name: item.title,
      children: array.filter(el => el.parentNodeID === parentId), // Not sure about that, but this is the idea
    })
  );

newArray будет данными, предоставленными вашим трем.