如何使用嵌套数据展开角度材质树中的嵌套节点

Question

我在angular 7应用程序中使用mat-tree，该应用程序具有对象数据的嵌套数组。我想在用户对嵌套节数据进行一些更改后展开嵌套节。

我有一个大的对象数组，我可以扩展一级树节点，但不能扩展嵌套部分。

例如，我有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
},

Answer 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 */ )
}