angular+NG-ZORRO如何实现树的操作(展示、选中传输给后台)

 

前言：今天做一个树形结构的展示，从后台取来数据进行展示，再从前台选取传给后台的一个操作。应用的技术是angular、NG-ZORRO

 

效果如下图：(两个量表类型) 后台需要提供的字段有tenantId、normalFormIds、scaleIds

分别是当前选中的表格中的id、范式的选中id不包括类型也就是一级标题、量表选中的id同理不包括一级类型的id

html页面

 

 

<form nz-form #validateForm="ngForm" (ngSubmit)="save()" nzLayout="vertical">

 

<!-- 租户名称(租户代码) -->

<nz-form-item>

<nz-form-control nzHasFeedback>

<div nz-row [nzGutter]="8">

<!-- 范式 -->

<div nz-col [nzSpan]="12">

<nz-card nzTitle="范式">

<nz-tree #normalFormComponent

[nzData]="treeNodes"

nzCheckable

nzMultiple

[nzCheckedKeys]="defaultCheckedKeys"

[nzExpandedKeys]="defaultExpandedKeys"

[nzSelectedKeys]="defaultSelectedKeys"

>

</nz-tree>

</nz-card>

</div>

<!--量表-->

<div nz-col [nzSpan]="12">

<nz-card nzTitle="量表">

<nz-tree

[nzData]="scaleTreeNode"

#scaleComponent

nzCheckable

nzMultiple

>

</nz-tree>

</nz-card>

</div>

</div>

</nz-form-control>

</nz-form-item>

 

<!-- 功能按钮 -->

<div class="modal-footer">

<button nz-button type="button" [disabled]="saving" (click)="close()">

{ {l("Cancel")}}

</button>

<button nz-button [nzType]="'primary'" type="submit" [disabled]="!validateForm.valid||saving">

{ {l("Save")}}

</button>

</div>

</form>

 

ts的文件：