通用组件-多级属性显示

src/app/view/admin/components/common-table/common-table.component.html

@@ -1,4 +1,4 @@
-<nz-card nzSize="small" [nzExtra]="refresh" [nzTitle]="title" [nzLoading]="loading">
+<nz-card nzSize="small" [nzExtra]="refresh" [nzTitle]="cardTitle" [nzLoading]="loading">
     <nz-table nzTableLayout="fixed"
               [nzData]="dataList.list"
               [nzTotal]="dataList.total"
@@ -16,17 +16,17 @@
         </tr>
         </thead>
         <tbody>
-        <tr *ngFor="let t of dataList.list">
+        <tr *ngFor="let t of dataList.list;let index = index">
             <ng-container *ngFor="let headData of data">
                 <td *ngIf="headData.show"
                     nz-typography
                     nzEllipsis
                     nzEllipsisRows="1"
-                    [nzTooltipTitle]="headData.fieldName+' : '+t[headData.fieldValue]"
+                    [nzTooltipTitle]="headData.isActionColumns ? null : headData.fieldName+' : '+getValue(index,headData.fieldValue)"
-                    nzTooltipPlacement="right"
+                    nzTooltipPlacement="top"
                     nz-tooltip>
                     <ng-template [ngIf]="!headData.isActionColumns">
-                        {{t[headData.fieldValue]}}
+                        {{ getValue(index, headData.fieldValue) }}
                     </ng-template>
                     <ng-container *ngIf="headData.isActionColumns">
                         <a *ngFor="let action of headData.action; let i = index" (mouseenter)="action.hover(t)"
@@ -47,5 +47,5 @@
 
 
 <ng-template #refresh>
-    <i nz-icon nzType="reload" nzTheme="outline" (click)="getData()"></i>
+    <i nz-icon nzType="reload" nzTheme="outline" (click)="getData()" style="cursor: pointer"></i>
 </ng-template>

src/app/view/admin/components/common-table/common-table.component.ts

@@ -14,9 +14,12 @@ export class CommonTableComponent<T> implements OnInit, OnChanges {
 
     }
 
-    @Input() data: Data<T>[]
+    /**
+     * 设置readonly data 因为后面有使用eval 为了安全 TODO
+     */
+    @Input() readonly data: Data<T>[]
     @Input() request: RequestObj
-    @Input() title: string
+    @Input() cardTitle: string
     loading: boolean = true;
 
     dataList: PageList<T> = new PageList<T>();
@@ -51,4 +54,10 @@ export class CommonTableComponent<T> implements OnInit, OnChanges {
     ngOnChanges(changes: SimpleChanges): void {
     }
 
+
+    getValue(index: number, fieldValue: string) {
+        // todo: 过滤
+        // tslint:disable-next-line:no-eval
+        return eval(`this.dataList.list[${index}].` + fieldValue);
+    }
 }

src/app/view/admin/test-common-table/test-common-table.component.html

@@ -1 +1 @@
-<app-common-table [data]="data" [request]="req" title="文章管理"></app-common-table>
+<app-common-table [data]="data" [request]="req" cardTitle="文章管理"></app-common-table>

src/app/view/admin/test-common-table/test-common-table.component.ts

@@ -1,7 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import {Data} from '../components/common-table/data';
 import {Article} from '../../../class/Article';
-import {RequestObj} from "../../../class/HttpReqAndResp";
+import {RequestObj} from '../../../class/HttpReqAndResp';
 
 @Component({
     selector: 'app-test-common-table',
@@ -26,13 +26,19 @@ title: "教你动手写一个刷课脚本"
 updateDateFormat: "2020-05-27 00:55:05"*/
     constructor() {
         this.data = [
-            {fieldName: '主键', fieldValue: 'id', show: false},
+            {fieldName: '主键', fieldValue: 'id', show: false, primaryKey: true},
             {fieldName: '标题', fieldValue: 'title', show: true},
-            {fieldName: '标签', fieldValue: 'category', show: true},
+            {fieldName: '发布日期', fieldValue: 'publishDateFormat', show: true},
+            {fieldName: '更新日期', fieldValue: 'updateDateFormat', show: true},
+            {fieldName: '文章类型', fieldValue: 'original', show: true},
+            {fieldName: '阅读量', fieldValue: 'readingNumber', show: true},
+            {fieldName: '分类', fieldValue: 'category', show: true},
             {fieldName: '👎数', fieldValue: 'dislikeCount', show: true},
             {fieldName: '👍数', fieldValue: 'likeCount', show: true},
             {fieldName: '状态', fieldValue: 'open', show: true},
             {fieldName: '简介', fieldValue: 'summary', show: false},
+            {fieldName: '作者', fieldValue: 'author.displayName', show: true},
+            {fieldName: '标签数', fieldValue: 'tags.length', show: true},
             {
                 fieldName: '操作', fieldValue: '', show: true, isActionColumns: true,
                 action: [

src/app/view/admin/test-common-table/test-common-table.module.ts

@@ -2,7 +2,7 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {TestCommonTableComponent} from './test-common-table.component';
 import {Router, RouterModule} from '@angular/router';
-import {CommonTableModule} from "../components/common-table/common-table.module";
+import {CommonTableModule} from '../components/common-table/common-table.module';
 
 
 @NgModule({