PrimeNG TurboTable 的性能问题
Performance issue with PrimeNG TurboTable
我正在使用带有嵌套 rows.While 的 PrimeNG TurboTable 将数据加载到 TurboTable 中,出现严重的性能问题,比如渲染需要大约 30 秒,并且需要超过 10 秒才能稳定,数据是从服务器,并且从服务器接收到的数据是相当快的。有没有其他人遇到问题。
如果是,您是如何修复的。
html
<p-table [value]="cars">
<ng-template pTemplate="header">
<tr>
<th>Vin</th>
<th>Year</th>
<th>Brand</th>
<th>Color</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-columns="columns" let-car>
<tr>
<td>{{car.vin}}</td>
<td>{{car.year}}</td>
<td>{{car.brand}}</td>
<td>
<ul>
<li *ngFor="let item of sales"
<a [ngClass]="{'active':car.order==item.order,'inactive':car.order > item.order}">
<i class="fa {{item.icon}}"></i>
</a>
</li>
</ul>
</td>
</tr>
</ng-template>
</p-table>
ts
this.cars =[
{"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff","order"=10},
{"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345","order"=15},
{"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr","order"=24},
{"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh","order"=2},
{"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34","order"=5},
{"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj","order"=8},
{"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr","order"=10},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5","order"=17},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=20},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=3},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=23},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=6},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=4},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=8},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=19},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=12},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=11},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=24},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff","order"=10},
{"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345","order"=15},
{"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr","order"=24},
{"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh","order"=2},
{"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34","order"=5},
{"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj","order"=8},
{"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr","order"=10},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5","order"=17},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=20},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=3},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=23},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=6},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=4},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=8},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=19},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=12},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=11},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=24},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff","order"=10},
{"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345","order"=15},
{"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr","order"=24},
{"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh","order"=2},
{"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34","order"=5},
{"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj","order"=8},
{"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr","order"=10},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5","order"=17},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=20},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=3},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=23},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=6},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=4},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=8},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=19},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=12},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=11},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=24},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff","order"=10},
{"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345","order"=15},
{"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr","order"=24},
{"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh","order"=2},
{"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34","order"=5},
{"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj","order"=8},
{"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr","order"=10},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5","order"=17},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=20},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=3},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=23},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=6},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=4},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=8},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=19},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=12},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=11},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=24},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff","order"=10},
{"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345","order"=15},
{"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr","order"=24},
{"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh","order"=2},
{"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34","order"=5},
{"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj","order"=8},
{"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr","order"=10},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5","order"=17},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=20},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=3},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=23},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=6},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=4},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=8},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=19},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=12},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=11},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=24},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff","order"=10},
{"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345","order"=15},
{"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr","order"=24},
{"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh","order"=2},
{"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34","order"=5},
{"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj","order"=8},
{"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr","order"=10},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5","order"=17},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=20},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=3},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=23},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=6},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=4},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=8},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=19},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=12},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=11},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=24},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff","order"=10},
{"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345","order"=15},
{"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr","order"=24},
{"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh","order"=2},
{"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34","order"=5},
{"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj","order"=8},
{"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr","order"=10},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5","order"=17},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=20},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=3},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=23},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=6},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=4},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=8},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=19},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=12},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=11},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=24},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff","order"=10},
{"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345","order"=15},
{"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr","order"=24},
{"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh","order"=2},
{"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34","order"=5},
{"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj","order"=8},
{"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr","order"=10},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5","order"=17},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=20},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=3},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=23},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=6},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=4},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=8},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=19},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=12},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=11},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=24},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff","order"=10},
{"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345","order"=15},
{"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr","order"=24},
{"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh","order"=2},
{"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34","order"=5},
{"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj","order"=8},
{"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr","order"=10},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5","order"=17},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=20},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=3},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=23},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=6},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=4},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=8},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=19},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=12},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=11},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=24},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff","order"=10},
{"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345","order"=15},
{"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr","order"=24},
{"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh","order"=2},
{"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34","order"=5},
{"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj","order"=8},
{"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr","order"=10},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5","order"=17},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=20},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=3},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=23},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=6},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=4},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=8},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=19},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=12},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=11},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=24},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
];
单独列表
this.sales = [
{ brand: 'Apple', lastYearSale: '51%',thisYearProfit: ',342',"order"=1,"icon"="fa-flag-o" },
{ brand: 'Samsung', lastYearSale: '83%',thisYearProfit: '2,122',"order"=2,"icon":"fa-address-card" },
{ brand: 'Microsoft', lastYearSale: '38%', thisYearProfit: ',500',"order"=3,"icon":"fa-eye" },
{ brand: 'Philips', lastYearSale: '49%',thisYearProfit: '0,323',"order"=4,"icon":"fa-address-card" },
{ brand: 'Song', lastYearSale: '17%',thisYearProfit: '500,332' ,"order"=5,"icon":"fa-fax"},
{ brand: 'LG', lastYearSale: '52%',thisYearProfit: '0,005',"order"=6,"icon":"fa-circle" },
{ brand: 'Sharp', lastYearSale: '82%',thisYearProfit: '0,214' ,"order"=7,"icon":"fa-folder"},
{ brand: 'Panasonic', lastYearSale: '44%',thisYearProfit: ',322',"order"=8,"icon":"fa-address-book-o" },
{ brand: 'HTC', lastYearSale: '90%',thisYearProfit: '6,232',"order"=9,"icon"="fa-bluetooth-b" },
{ brand: 'Toshiba', lastYearSale: '75%',thisYearProfit: ',533',"order"=10,"icon"="fa-address-book-o"},
{ brand: 'Toshiba', lastYearSale: '75%',thisYearProfit: ',533',"order"=11,"icon"="fa-bath"},
{ brand: 'Toshiba', lastYearSale: '75%',thisYearProfit: ',533',"order"=12,"icon"="fa-address-card"},
{ brand: 'Toshiba', lastYearSale: '75%',thisYearProfit: ',533',"order"=13,"icon"="fa-bluetooth-b"},
{ brand: 'Toshiba', lastYearSale: '75%',thisYearProfit: ',533',"order"=14,"icon"="fa-eye"},
{ brand: 'Toshiba', lastYearSale: '75%',thisYearProfit: ',533',"order"=15,"icon"="fa-circle"},
{ brand: 'Toshiba', lastYearSale: '75%',thisYearProfit: ',533',"order"=16,"icon"="fa-fax"},
{ brand: 'Toshiba', lastYearSale: '75%',thisYearProfit: ',533',"order"=17,"icon"="fa-address-book-o"},
{ brand: 'Toshiba', lastYearSale: '75%',thisYearProfit: ',533',"order"=18,"icon"="fa-address-card"},
{ brand: 'Toshiba', lastYearSale: '75%',thisYearProfit: ',533',"order"=19,"icon"="fa-bluetooth-b"},
{ brand: 'Toshiba', lastYearSale: '75%',thisYearProfit: ',533',"order"=20,"icon"="fa-eye"},
{ brand: 'Toshiba', lastYearSale: '75%',thisYearProfit: ',533',"order"=21,"icon"="fa-fax"},
{ brand: 'Toshiba', lastYearSale: '75%',thisYearProfit: ',533',"order"=22,"icon"="fa-circle"},
{ brand: 'Toshiba', lastYearSale: '75%',thisYearProfit: ',533',"order"=23,"icon"="fa-folder"},
{ brand: 'Toshiba', lastYearSale: '75%',thisYearProfit: ',533',"order"=24,"icon"="fa-flag-o"}
];
问题不在于 TurboTable,而是你的最后一列,其中你为 3401 行的每一行显示了 24 个图标。
显示 81624 个图标需要相当多的时间,即使在 table 之外。为了说服你,试试这个:
<div *ngFor="let car of cars">
<li *ngFor="let item of sales">
<i class="fa {{item.icon}}"></i>
</li>
</div>
您将遇到同样的性能问题。
要解决你的问题,你为什么不使用分页?这将非常快:
<p-table [value]="cars" sortField="brand" [paginator]="true" [rows]="10">
...
</p-table>
查看工作Plunker
我正在使用带有嵌套 rows.While 的 PrimeNG TurboTable 将数据加载到 TurboTable 中,出现严重的性能问题,比如渲染需要大约 30 秒,并且需要超过 10 秒才能稳定,数据是从服务器,并且从服务器接收到的数据是相当快的。有没有其他人遇到问题。 如果是,您是如何修复的。
html
<p-table [value]="cars">
<ng-template pTemplate="header">
<tr>
<th>Vin</th>
<th>Year</th>
<th>Brand</th>
<th>Color</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-columns="columns" let-car>
<tr>
<td>{{car.vin}}</td>
<td>{{car.year}}</td>
<td>{{car.brand}}</td>
<td>
<ul>
<li *ngFor="let item of sales"
<a [ngClass]="{'active':car.order==item.order,'inactive':car.order > item.order}">
<i class="fa {{item.icon}}"></i>
</a>
</li>
</ul>
</td>
</tr>
</ng-template>
</p-table>
ts
this.cars =[
{"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff","order"=10},
{"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345","order"=15},
{"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr","order"=24},
{"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh","order"=2},
{"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34","order"=5},
{"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj","order"=8},
{"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr","order"=10},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5","order"=17},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=20},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=3},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=23},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=6},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=4},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=8},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=19},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=12},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=11},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=24},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff","order"=10},
{"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345","order"=15},
{"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr","order"=24},
{"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh","order"=2},
{"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34","order"=5},
{"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj","order"=8},
{"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr","order"=10},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5","order"=17},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=20},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=3},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=23},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=6},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=4},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=8},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=19},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=12},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=11},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=24},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff","order"=10},
{"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345","order"=15},
{"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr","order"=24},
{"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh","order"=2},
{"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34","order"=5},
{"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj","order"=8},
{"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr","order"=10},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5","order"=17},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=20},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=3},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=23},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=6},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=4},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=8},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=19},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=12},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=11},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=24},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff","order"=10},
{"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345","order"=15},
{"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr","order"=24},
{"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh","order"=2},
{"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34","order"=5},
{"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj","order"=8},
{"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr","order"=10},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5","order"=17},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=20},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=3},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=23},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=6},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=4},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=8},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=19},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=12},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=11},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=24},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff","order"=10},
{"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345","order"=15},
{"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr","order"=24},
{"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh","order"=2},
{"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34","order"=5},
{"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj","order"=8},
{"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr","order"=10},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5","order"=17},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=20},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=3},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=23},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=6},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=4},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=8},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=19},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=12},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=11},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=24},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff","order"=10},
{"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345","order"=15},
{"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr","order"=24},
{"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh","order"=2},
{"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34","order"=5},
{"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj","order"=8},
{"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr","order"=10},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5","order"=17},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=20},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=3},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=23},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=6},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=4},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=8},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=19},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=12},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=11},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=24},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff","order"=10},
{"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345","order"=15},
{"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr","order"=24},
{"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh","order"=2},
{"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34","order"=5},
{"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj","order"=8},
{"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr","order"=10},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5","order"=17},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=20},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=3},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=23},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=6},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=4},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=8},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=19},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=12},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=11},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=24},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff","order"=10},
{"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345","order"=15},
{"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr","order"=24},
{"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh","order"=2},
{"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34","order"=5},
{"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj","order"=8},
{"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr","order"=10},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5","order"=17},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=20},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=3},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=23},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=6},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=4},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=8},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=19},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=12},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=11},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=24},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff","order"=10},
{"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345","order"=15},
{"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr","order"=24},
{"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh","order"=2},
{"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34","order"=5},
{"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj","order"=8},
{"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr","order"=10},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5","order"=17},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=20},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=3},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=23},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=6},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=4},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=8},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=19},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=12},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=11},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=24},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff","order"=10},
{"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345","order"=15},
{"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr","order"=24},
{"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh","order"=2},
{"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34","order"=5},
{"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj","order"=8},
{"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr","order"=10},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5","order"=17},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=20},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=3},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=23},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=6},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=4},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=8},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=19},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=12},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=11},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=24},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
];
单独列表
this.sales = [
{ brand: 'Apple', lastYearSale: '51%',thisYearProfit: ',342',"order"=1,"icon"="fa-flag-o" },
{ brand: 'Samsung', lastYearSale: '83%',thisYearProfit: '2,122',"order"=2,"icon":"fa-address-card" },
{ brand: 'Microsoft', lastYearSale: '38%', thisYearProfit: ',500',"order"=3,"icon":"fa-eye" },
{ brand: 'Philips', lastYearSale: '49%',thisYearProfit: '0,323',"order"=4,"icon":"fa-address-card" },
{ brand: 'Song', lastYearSale: '17%',thisYearProfit: '500,332' ,"order"=5,"icon":"fa-fax"},
{ brand: 'LG', lastYearSale: '52%',thisYearProfit: '0,005',"order"=6,"icon":"fa-circle" },
{ brand: 'Sharp', lastYearSale: '82%',thisYearProfit: '0,214' ,"order"=7,"icon":"fa-folder"},
{ brand: 'Panasonic', lastYearSale: '44%',thisYearProfit: ',322',"order"=8,"icon":"fa-address-book-o" },
{ brand: 'HTC', lastYearSale: '90%',thisYearProfit: '6,232',"order"=9,"icon"="fa-bluetooth-b" },
{ brand: 'Toshiba', lastYearSale: '75%',thisYearProfit: ',533',"order"=10,"icon"="fa-address-book-o"},
{ brand: 'Toshiba', lastYearSale: '75%',thisYearProfit: ',533',"order"=11,"icon"="fa-bath"},
{ brand: 'Toshiba', lastYearSale: '75%',thisYearProfit: ',533',"order"=12,"icon"="fa-address-card"},
{ brand: 'Toshiba', lastYearSale: '75%',thisYearProfit: ',533',"order"=13,"icon"="fa-bluetooth-b"},
{ brand: 'Toshiba', lastYearSale: '75%',thisYearProfit: ',533',"order"=14,"icon"="fa-eye"},
{ brand: 'Toshiba', lastYearSale: '75%',thisYearProfit: ',533',"order"=15,"icon"="fa-circle"},
{ brand: 'Toshiba', lastYearSale: '75%',thisYearProfit: ',533',"order"=16,"icon"="fa-fax"},
{ brand: 'Toshiba', lastYearSale: '75%',thisYearProfit: ',533',"order"=17,"icon"="fa-address-book-o"},
{ brand: 'Toshiba', lastYearSale: '75%',thisYearProfit: ',533',"order"=18,"icon"="fa-address-card"},
{ brand: 'Toshiba', lastYearSale: '75%',thisYearProfit: ',533',"order"=19,"icon"="fa-bluetooth-b"},
{ brand: 'Toshiba', lastYearSale: '75%',thisYearProfit: ',533',"order"=20,"icon"="fa-eye"},
{ brand: 'Toshiba', lastYearSale: '75%',thisYearProfit: ',533',"order"=21,"icon"="fa-fax"},
{ brand: 'Toshiba', lastYearSale: '75%',thisYearProfit: ',533',"order"=22,"icon"="fa-circle"},
{ brand: 'Toshiba', lastYearSale: '75%',thisYearProfit: ',533',"order"=23,"icon"="fa-folder"},
{ brand: 'Toshiba', lastYearSale: '75%',thisYearProfit: ',533',"order"=24,"icon"="fa-flag-o"}
];
问题不在于 TurboTable,而是你的最后一列,其中你为 3401 行的每一行显示了 24 个图标。
显示 81624 个图标需要相当多的时间,即使在 table 之外。为了说服你,试试这个:
<div *ngFor="let car of cars">
<li *ngFor="let item of sales">
<i class="fa {{item.icon}}"></i>
</li>
</div>
您将遇到同样的性能问题。
要解决你的问题,你为什么不使用分页?这将非常快:
<p-table [value]="cars" sortField="brand" [paginator]="true" [rows]="10">
...
</p-table>
查看工作Plunker