Angular Mateiral treeView simple Version－~

=ts=

// treeView
rpTreeView: MatTableDataSource<any>;
treeControl;
 

constructor(private Service: ReportService,
public dialog: MatDialog,
private http: HttpClient) {
 
// treeView
this.treeControl = new NestedTreeControl<any>(node => observableOf(node.childern));
}

=html=

<mat-tree [dataSource]="rpTreeView" [treeControl]="treeControl">
<mat-nested-tree-node *matTreeNodeDef="let node; ">

<button [disabled]="!node.childern || node.childern.length==0" mat-icon-button type="button" [ngStyle]="{'color': !node.childern ? 'white' :(node.childern.length==0 ? 'white' : 'black') }"
(click)="treeControl.toggle(node)">
<mat-icon class="mat-icon-rtl-mirror">
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>
</button>
<span class="cursor_pointer" (click)="SelectedNode(node)" [ngClass]="{'highlight_2': selectedNode == node.KEY_NO } ">
{{node.CODE}} -- {{node.DESCRP}} ({{node.KEY_NO}} )
</span>
<ng-container matTreeNodeOutlet *ngIf="treeControl.isExpanded(node)"></ng-container>
</mat-nested-tree-node>
</mat-tree>

=controller=

產生nested tree json

[System.Web.Http.HttpGet]
[System.Web.Http.Route("api/SaInvoice/WebApTreeView")]
public HttpResponseMessage WebApTreeView()
{
try
{
DynamicParameters parameter = new DynamicParameters();
string SqlString = " ";

//parameter.Add(":F_KEY_NO", queryParm.F_KEY_NO);
var data = this.db.Query(SqlString).ToList();

var result = from a in data
where a.TREE_F_KEY == null
orderby a.CODE
select new
{
a.KEY_NO,
a.F_KEY_NO,
a.TREE_KEY,
a.TREE_F_KEY,
a.CODE,
a.DESCRP,
childern = from b in data
where a.TREE_KEY == b.TREE_F_KEY
orderby b.CODE
select new
{
b.KEY_NO,
b.F_KEY_NO,
b.TREE_KEY,
b.TREE_F_KEY,
b.CODE,
b.DESCRP,
childern = from c in data
where b.TREE_KEY == c.TREE_F_KEY
orderby c.CODE
select new
{
c.KEY_NO,
c.F_KEY_NO,
c.CODE,
c.DESCRP
}
}
};

return Request.CreateResponse(HttpStatusCode.OK, result);
}
catch (Exception ex)
{
return Request.CreateResponse(HttpStatusCode.InternalServerError, ex);
}
}