perf(benchmarks): update ng2-switch to match ng2
- use the ~same template layout (text nodes), - use trackBy both benchmark now show about the same perfs.
This commit is contained in:
parent
fdf4309b50
commit
606e51881a
|
@ -5,8 +5,13 @@ import {TableCell, emptyTable} from '../util';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'largetable',
|
selector: 'largetable',
|
||||||
template:
|
template: `<table><tbody>
|
||||||
`<table><tbody><tr *ngFor="let row of data; trackBy: trackByIndex"><td *ngFor="let cell of row; trackBy: trackByIndex" [style.backgroundColor]="cell.row % 2 ? '' : 'grey'">{{cell.value}}</td></tr></tbody></table>`
|
<tr *ngFor="let row of data; trackBy: trackByIndex">
|
||||||
|
<td *ngFor="let cell of row; trackBy: trackByIndex" [style.backgroundColor]="cell.row % 2 ? '' : 'grey'">
|
||||||
|
{{cell.value}}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody></table>`,
|
||||||
})
|
})
|
||||||
export class TableComponent {
|
export class TableComponent {
|
||||||
@Input()
|
@Input()
|
||||||
|
|
|
@ -6,18 +6,18 @@ import {TableCell, emptyTable} from '../util';
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'largetable',
|
selector: 'largetable',
|
||||||
template: `<table><tbody>
|
template: `<table><tbody>
|
||||||
<tr *ngFor="let row of data">
|
<tr *ngFor="let row of data; trackBy: trackByIndex">
|
||||||
<template ngFor [ngForOf]="row" let-cell>
|
<template ngFor [ngForOf]="row" [ngForTrackBy]="trackByIndex" let-cell><ng-container [ngSwitch]="cell.row % 2">
|
||||||
<ng-container [ngSwitch]="cell.row % 2">
|
<td *ngSwitchCase="0" style="background-color: grey">{{cell.value}}</td><td *ngSwitchDefault>{{cell.value}}</td>
|
||||||
<td *ngSwitchCase="0" style="background-color: grey">{{cell.value}}</td>
|
</ng-container></template>
|
||||||
<td *ngSwitchDefault>{{cell.value}}</td>
|
</tr>
|
||||||
</ng-container>
|
</tbody></table>`
|
||||||
</template>
|
|
||||||
</tr></tbody></table>`
|
|
||||||
})
|
})
|
||||||
export class TableComponent {
|
export class TableComponent {
|
||||||
@Input()
|
@Input()
|
||||||
data: TableCell[][] = emptyTable;
|
data: TableCell[][] = emptyTable;
|
||||||
|
|
||||||
|
trackByIndex(index: number, item: any) { return index; }
|
||||||
}
|
}
|
||||||
|
|
||||||
@NgModule({imports: [BrowserModule], bootstrap: [TableComponent], declarations: [TableComponent]})
|
@NgModule({imports: [BrowserModule], bootstrap: [TableComponent], declarations: [TableComponent]})
|
||||||
|
|
Loading…
Reference in New Issue