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:
Victor Berchet 2016-10-12 16:36:18 -07:00 committed by Igor Minar
parent fdf4309b50
commit 606e51881a
2 changed files with 15 additions and 10 deletions

View File

@ -5,8 +5,13 @@ import {TableCell, emptyTable} from '../util';
@Component({
selector: 'largetable',
template:
`<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>`
template: `<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>`,
})
export class TableComponent {
@Input()

View File

@ -6,18 +6,18 @@ import {TableCell, emptyTable} from '../util';
@Component({
selector: 'largetable',
template: `<table><tbody>
<tr *ngFor="let row of data">
<template ngFor [ngForOf]="row" let-cell>
<ng-container [ngSwitch]="cell.row % 2">
<td *ngSwitchCase="0" style="background-color: grey">{{cell.value}}</td>
<td *ngSwitchDefault>{{cell.value}}</td>
</ng-container>
</template>
</tr></tbody></table>`
<tr *ngFor="let row of data; trackBy: trackByIndex">
<template ngFor [ngForOf]="row" [ngForTrackBy]="trackByIndex" let-cell><ng-container [ngSwitch]="cell.row % 2">
<td *ngSwitchCase="0" style="background-color: grey">{{cell.value}}</td><td *ngSwitchDefault>{{cell.value}}</td>
</ng-container></template>
</tr>
</tbody></table>`
})
export class TableComponent {
@Input()
data: TableCell[][] = emptyTable;
trackByIndex(index: number, item: any) { return index; }
}
@NgModule({imports: [BrowserModule], bootstrap: [TableComponent], declarations: [TableComponent]})