[完善]每层消防要素引入tree组件

src/app/ui/collection-tools/examinationQuestions.html

@@ -1,32 +1,25 @@
-<div style="min-width: 240px;">
+<div style="min-width: 240px;" id="nodeTree">
   <div style="text-align: center;font-weight: 550;">消防设施考题设定</div>
   <div style="max-height: 300px;overflow-y: auto; margin: 25px 0;">
     <!-- 消防列表树 -->
-    <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
-
-      <mat-tree-node [ngClass]="{'isLookPattern': !node.isLookPattern}" *matTreeNodeDef="let node;" matTreeNodePadding cdkTreeNodePaddingIndent='26' class="treeNode">
-        <button mat-icon-button disabled></button>
-        <span title="{{node.name}}" [ngClass]="{'treeText': !node.isTemplate}">
-          {{node.name}}      
-        </span> 
-        <span  *ngIf="node.isTemplate">({{node.children.length}})</span>
-        <mat-checkbox style="margin-left: auto;" color=primary></mat-checkbox>
-      </mat-tree-node>
-
-      <mat-tree-node [ngClass]="{'isLookPattern': !node.isLookPattern}" *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding class="treeNode" >
-        <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name">
-          <mat-icon class="mat-icon-rtl-mirror">
-            {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
-          </mat-icon>
-        </button>
-        <span title="{{node.name}}" [ngClass]="{'treeText': !node.isTemplate}">
-          {{node.name}}      
-        </span>   
-        <span  *ngIf="node.isTemplate && node.isNewElement">({{node.children.length}})</span>
-        <mat-checkbox style="margin-left: auto;" color=primary></mat-checkbox>
-      </mat-tree-node>
-
-    </mat-tree>
+    <nz-tree
+    [nzData]="data.treeData"
+    nzCheckable
+    nzMultiple
+    [nzCheckedKeys]="defaultCheckedKeys"
+    [nzExpandedKeys]="defaultExpandedKeys"
+    [nzSelectedKeys]="defaultSelectedKeys"
+    (nzClick)="nzEvent($event)"
+    (nzExpandChange)="nzEvent($event)"
+    (nzCheckBoxChange)="nzEvent($event)"
+    [nzTreeTemplate]="nzTreeTemplate"
+    >
+    </nz-tree>
+    <ng-template #nzTreeTemplate let-node let-origin="origin">
+        <div class="treeNodeTemplate">
+            <label class="overflowText textNode">{{node.origin.name}}</label>
+        </div>
+    </ng-template>
     <!-- 消防列表树 -->
   </div>
   <div style="text-align: center;">

src/app/ui/collection-tools/examinationQuestions.ts

@@ -15,30 +15,16 @@ export class examinationQuestions {
 
     constructor(private http:HttpClient, public dialog: MatDialog, public snackBar: MatSnackBar, public dialogRef: MatDialogRef<any>,
     @Inject(MAT_DIALOG_DATA) public data) {}
-    // tree配置
-    private _transformer = (node, level: number) => {//要给渲染节点传那些属性参数
-      return {
-        expandable: !!node.children && node.children.length > 0,
-        name: node.name || node.Name,
-        level: level,
-        id: node.id || node.Id,
-        children:node.children,
-        isTemplate:node.isTemplate,
-        isNewElement:node.isNewElement,
-        isLook:node.isLook,
-        isLookPattern:node.isLookPattern || null
-      };
-    }
-    treeControl = new FlatTreeControl<any>(node => node.level, node => node.expandable);
-    treeFlattener = new MatTreeFlattener(this._transformer, node => node.level, node => node.expandable, node => node.children);
-    dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
-    hasChild = (_: number, node: any) => node.expandable;
 
+    defaultCheckedKeys = []; //指定选中复选框的树节点 key值
+    defaultExpandedKeys = []; //展开指定的树节点 key值
+    defaultSelectedKeys = []; //指定选中的树节点 key值
     ngOnInit(): void {
-      this.dataSource.data = this.data.treeData
-      this.treeControl.expandAll()
+      console.log(this.data.treeData)
     }
+    nzEvent($event,key){
 
+    }
     //提交
     submit () {
       console.log(this.data)

src/assets/css/ngZorroTree.css

@@ -344,7 +344,7 @@
   text-align: center;
   cursor: pointer
 }
-#createtestscore .ant-tree .ant-tree-switcher {
+#createtestscore,#nodeTree .ant-tree .ant-tree-switcher {
   line-height: 22px;
 }