疏創建HTML表

Question

我想創建HTML表像下

#  Class  Method  A  b  c  d 
1  User  get  10  20  30 40 
       set  40  30  20 10 
       find  40  30  20 10 
2  Profile get  10  20  30 40 
       set  40  30  20 10 
       find  40  30  20 10 

我有以下結構

export class Profiler { 
    constructor(
    public classz: string, 
    public methodProfilers: {[key: string]: MethodProfiler;} 
) {} 
} 

export class MethodProfiler { 
    constructor(
    public count: number, 
    public totalTime: number, 
    public lastTotalTime: number, 
    public maxTime: number, 
    public avgTime: number, 
    public avgMemory: number 
) {} 
} 

是否有可能採用了棱角分明4 *ngfor建立這樣HTML表？我從後端獲取Profiler列表。

getProfilerKeys(methodProfilers: Map<string, MethodProfiler>) { 
    return Object.keys(methodProfilers); 
    } 

<div class="table-responsive"> 
        <table class="table table-sm table-bordered"> 
         <thead class="thead-default"> 
          <tr> 
           <th class="text-center">Classz</th> 
           <th class="text-center">Method</th> 
           <th class="text-center">Count</th> 
           <th class="text-center">TotalTime</th> 
           <th class="text-center">LastTotalTime</th> 
           <th class="text-center">MaxTime</th> 
           <th class="text-center">AvgTime</th> 
           <th class="text-center">AvgMemory</th> 
          </tr> 
         </thead> 
         <tbody> 
          <tr class="text-center" *ngFor="let profiler of page.content;"> 
           <td>{{profiler.classz}}</td> 
           <td> 
            <table> 
             <tr *ngFor="let key of getProfilerKeys(profiler.methodProfilers);"> 
              <td>{{key}}</td> 
             </tr> 
            </table> 
           </td> 
           <td> 
            <table> 
             <tr *ngFor="let key of getProfilerKeys(profiler.methodProfilers);"> 
              <td *ngFor="let subkey of getProfilerKeys(profiler.methodProfilers[key]);">{{profiler.methodProfilers[key][subkey]}}</td> 
             </tr> 
            </table> 
           </td> 
          </tr> 
         </tbody> 
        </table> 
       </div> 

Answer 1

更容易實現恕我直言，如果展開了*ngFor到其<ng-template>等同。

然後，創建用於每個資料一個td，並設置在所述td屬性rowspan是陣列中的「ProfilerKeys」的數量。

我使用函數isNewIndex()來檢測外層循環（Profiler對象）何時更改其index以繪製另一個跨行td。

import { Component } from '@angular/core'; 
import { Profiler, MethodProfiler } from './profile'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <table class="table table-sm table-bordered" width="100%"> 
    <thead class="thead-default"> 
     <tr> 
     <th class="text-center">#</th> 
     <th class="text-center">Class</th> 
     <th class="text-center">Method</th> 
     <th class="text-center">Count</th> 
     <th class="text-center">TotalTime</th> 
     <th class="text-center">LastTotalTime</th> 
     <th class="text-center">MaxTime</th> 
     <th class="text-center">AvgTime</th> 
     <th class="text-center">AvgMemory</th> 
     </tr> 
    </thead> 
    <tbody> 
     <ng-template ngFor let-profiler [ngForOf]="profilers" let-i="index"> 
     <ng-template ngFor let-method [ngForOf]="getProfilerKeys(profiler.methodProfilers)"> 
      <tr class="text-center"> 
      <td *ngIf="isNewIndex(i)" [attr.rowspan]="getProfilerKeys(profiler.methodProfilers).length">{{i + 1}}</td> 
      <td *ngIf="isNewIndex(i, true)" [attr.rowspan]="getProfilerKeys(profiler.methodProfilers).length">{{profiler.classz}}</td> 
      <td>{{method}}</td> 
      <td>{{profiler.methodProfilers[method].count}}</td> 
      <td>{{profiler.methodProfilers[method].totalTime}}</td> 
      <td>{{profiler.methodProfilers[method].lastTotalTime}}</td> 
      <td>{{profiler.methodProfilers[method].maxTime}}</td> 
      <td>{{profiler.methodProfilers[method].avgTime}}</td> 
      <td>{{profiler.methodProfilers[method].avgMemory}}</td> 
      </tr> 
     </ng-template> 
     </ng-template> 
    </tbody> 
    </table> 
` 
}) 

export class AppComponent { 

    lastIndex = -1; 

    getProfilerKeys(methodProfilers: Map<string, MethodProfiler>) { 
    return Object.keys(methodProfilers); 
    } 

    // on last call to this function per row pass true for the updateIndex param 
    isNewIndex(thisIndex: number, updateIndex : boolean) { 
    if (thisIndex === this.lastIndex) return false; 
    if (updateIndex === true) this.lastIndex = thisIndex; 
    return true; 
    } 

    profilers = [ 
    new Profiler('User', 
     { 
     'get' : new MethodProfiler(10,20,30,40,50,60), 
     'set' : new MethodProfiler(1,2,3,4,5,6) 
     } 
    ), 
    new Profiler('Profile', 
     { 
     'get' : new MethodProfiler(60,50,40,30,20,10), 
     'set' : new MethodProfiler(6,5,4,3,2,1) 
     } 
    ) 
    ]; 
} 

演示：https://plnkr.co/edit/B5YYn9Jxx9nQCzxlr2VS?p=preview