在角度應用程序中以樹結構顯示數據

Question

在我的應用程序中，我需要以樹結構的格式顯示數據。

基本上，我需要根據列表中的 parent_id 縮進項目，以便它創建一個樹結構，請參見下面給出的屏幕截圖，其中我根據它們在樹結構中的位置進行縮進。

這是我收到的數據：

[
  {
    "id": 1,
    "title": "Item 1",
    "parent_id": null
  },
  {
    "id": 2,
    "title": "Item 2",
    "parent_id": 1
  },
  {
    "id": 3,
    "title": "Item 3",
    "parent_id": 2
  },
  {
    "id": 4,
    "title": "Item 4",
    "parent_id": null
  },
  {
    "id": 5,
    "title": "Item 5",
    "parent_id": null
  },
  {
    "id": 6,
    "title": "Item 6",
    "parent_id": 5
  },
  {
    "id": 7,
    "title": "Item 7",
    "parent_id": 6
  },
  {
    "id": 8,
    "title": "Item 8",
    "parent_id": 6
  }
]

我需要一些關於如何格式化這些數據的建議，以便可以輕松地對其進行迭代並將其顯示在前端。 目前我正在考慮創建一個嵌套的對象數組，其中每個對象都將像下面這樣保存其子對象。

[
  {
    "id": 1,
    "title": "Item 1",
    "parent_id": null,
    "child": [{
        "id": 2,
        "title": "Item 2",
        "parent_id": 1,
        "child": [{
            "id": 3,
            "title": "Item 3",
            "parent_id": 2
        }]
    }]
  },
  {
    "id": 4,
    "title": "Item 4",
    "parent_id": null
  },
  {
    "id": 5,
    "title": "Item 5",
    "parent_id": null,
    "child": [{
        "id": 6,
        "title": "Item 6",
        "parent_id": 5,
        "child": [{
            "id": 7,
            "title": "Item 7",
            "parent_id": 6
        }, {
            "id": 8,
            "title": "Item 8",
            "parent_id": 6
        }]
    }]
  }
]

Answer 1

你可以墊樹。 這很容易和有用。 您可以使用 css 根據您的意願自定義設計。 官方文檔： https : //material.angular.io/components/tree/overview 。