如何使用嵌套数据扩展角度材料树中的嵌套节点？答案

【问题标题】：How to expand nested node in angular material tree with nested data?如何使用嵌套数据扩展角度材料树中的嵌套节点？
【发布时间】：2021-04-05 13:18:18
【问题描述】：

我在我的 Angular 7 应用程序中使用带有嵌套对象数据数组的 mat 树。我想在用户对嵌套部分数据进行一些更改后展开嵌套部分。

我有大量对象，我可以展开第一级树节点，但无法展开嵌套部分。

例如，我的节号为 9.2.1.2，所以在这种情况下，我必须扩展节号为 9、9.2、9.2.1 和 9.2.1.2 的节。怎么做？下面是数组中的示例对象

{
    "sectionNum": 6,
    "title": "ETHICS AND REGULATORY APPROVAL",
    "csrSectionNum": "5",
    "templateDTO": {
      "sectionNum": 89,
      "title": "ETHICS AND REGULATORY APPROVAL",
      "csrSectionNum": "5",
      "parent": "0",
      "sequence": 1,
      "active": 1,
      "subReportTypeId": 2,
      "sectionType": "3",
      "isHighlightSection": 0,
      "children": [],
      "contents": null
    },
    "isDefault": 1,
    "parent": "0",
    "sequence": 1,
    "sectionType": "3",
    "active": 1,
    "studyId": 2,
    "version": 0,
    "userId": 0,
    "createdDate": "2021-04-03 10:03:18",
    "isHighlightSection": 0,
    "sectionIdentifiedPercentage": "100",
    "isBookmarked": false,
    "children": [
      {
        "sectionNum": 7,
        "title": "INDEPENDENT ETHICS COMMITTEE APPROVAL",
        "csrSectionNum": "5.1",
        "templateDTO": {
          "sectionNum": 90,
          "title": "INDEPENDENT ETHICS COMMITTEE APPROVAL",
          "csrSectionNum": "5.1",
          "parent": "5",
          "sequence": 1,
          "active": 1,
          "subReportTypeId": 2,
          "sectionType": "4",
          "isHighlightSection": 0,
          "children": [],
          "contents": null
        },
        "isDefault": 1,
        "parent": "5",
        "sequence": 1,
        "sectionType": "4",
        "active": 1,
        "studyId": 2,
        "version": 0,
        "userId": 0,
        "createdDate": "2021-04-03 10:03:18",
        "isHighlightSection": 0,
        "sectionIdentifiedPercentage": "100",
        "isBookmarked": false,
        "children": [],
        "contents": null,
        "sfdtContent": null,
        "keywordInput": false
      },
      {
        "sectionNum": 8,
        "title": "ETHICAL CONDUCT OF THE STUDY",
        "csrSectionNum": "5.2",
        "templateDTO": {
          "sectionNum": 91,
          "title": "ETHICAL CONDUCT OF THE STUDY",
          "csrSectionNum": "5.2",
          "parent": "5",
          "sequence": 2,
          "active": 1,
          "subReportTypeId": 2,
          "sectionType": "4",
          "isHighlightSection": 0,
          "children": [],
          "contents": null
        },
        "isDefault": 1,
        "parent": "5",
        "sequence": 2,
        "sectionType": "4",
        "active": 1,
        "studyId": 2,
        "version": 0,
        "userId": 0,
        "createdDate": "2021-04-03 10:03:18",
        "isHighlightSection": 0,
        "sectionIdentifiedPercentage": "100",
        "isBookmarked": false,
        "children": [],
        "contents": null,
        "sfdtContent": null,
        "keywordInput": false
      },
      {
        "sectionNum": 9,
        "title": "PATIENT INFORMATION AND CONSENT",
        "csrSectionNum": "5.3",
        "templateDTO": {
          "sectionNum": 92,
          "title": "PATIENT INFORMATION AND CONSENT",
          "csrSectionNum": "5.3",
          "parent": "5",
          "sequence": 3,
          "active": 1,
          "subReportTypeId": 2,
          "sectionType": "0",
          "isHighlightSection": 0,
          "children": [],
          "contents": null
        },
        "isDefault": 1,
        "parent": "5",
        "sequence": 3,
        "sectionType": "0",
        "active": 1,
        "studyId": 2,
        "version": 0,
        "userId": 0,
        "createdDate": "2021-04-03 10:03:18",
        "isHighlightSection": 0,
        "sectionIdentifiedPercentage": "100",
        "isBookmarked": false,
        "children": [],
        "contents": null,
        "sfdtContent": null,
        "keywordInput": false
      }
    ],
    "contents": null,
    "sfdtContent": null,
    "keywordInput": false
  },

【问题讨论】：

标签： angular angular-material-7

【解决方案1】：

如果您使用NestedTreeControl，您可以在此控件上调用expandDescendants 函数以递归方式展开以给定数据节点为根的子树。

treeControl = new NestedTreeControl<any> (node => node.children);
dataSource = new ArrayDataSource(TREE_DATA);

ngOnInit() {
   this.treeControl.dataNodes = TREE_DATA
   this.treeControl.expandDescendants(TREE_DATA[1] /* for example */ )
}

【讨论】：