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，并将rowspan上的td属性设置为数组中“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

创建稀疏的Html表

1 个答案: