を作成します。私は、私は次のような構造まばらなHTMLテーブル
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テーブルを作成することが可能である必要があり
# 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
を、以下のようなHTMLテーブルを作成したいですか?私はバックエンドからプロファイラのリストを取得しています。
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>
あなたはgetProfilerKeys(profiler.methodProfilers)の 'は' 'getProfilerKeys(...)は'すべての変更を検出順番で繰り返し呼び出されるようにしますことに注意してください。メソッドへのバインディングは、通常、悪い考えです。むしろ、メソッド呼び出しの結果をフィールドに代入し、代わりにそのフィールドにバインドします。内側の '* ngFor'では、これは配列である必要があります。 –
はい私はそれを知っていますが、私はルックアンドフィールを最初に実現し、バインディングを最適化すると思っています:) –
それで問題は何ですか? –