我在项目中使用Angular 2+和Teradata共价数据表。 我有很多列和50行的表。由于html代码中的某些原因,我只能看到大约12行并滚动。当我滚动时,它会重新渲染数据并显示其他12行,因此页面运行缓慢。
有一些html:
<td-data-table
#dataTable
[(ngModel)]="selectedRows"
[data]="filteredData"
[columns]="columns"
[selectable]="true"
[multiple]="true"
[sortable]="true"
[sortBy]="sortBy"
[sortOrder]="sortOrder"
(sortChange)="sort($event)"
(rowSelect)="rowSelect($event)"
(selectAll)="selectAllEvent($event)"
class="fixed-header">
<ng-template tdDataTableTemplate="Id"
let-value="value"
let-row="row"
let-column="column">
<ng-container *ngIf="row['Source'] == 1; else elseTemplate">
...
</ng-container>
<ng-template #elseTemplate>
...
</ng-template>
</ng-template>
<ng-template tdDataTableTemplate="Rate"
let-value="value"
let-row="row"
let-column="column">
...
</ng-template>
如何解决此问题?
也许共价带有一些标志可以一次渲染所有50行而无需重新渲染?
答案 0 :(得分:1)
我对角材料组件(步进器)也遇到了同样的问题,而动画是原因。因此,我为您提供了3种解决方案:
解决方案1,如果您不关心动画:
尝试使用NoopAnimationsModule
代替BrowserAnimationsModule
。
解决方案2,如果您喜欢冒险并且乐观:
尝试将Angular更新到最新版本。从5升级到7时,我注意到动画存在巨大差异。有Angular升级工具可以为您提供帮助。
解决方案3,如果动画和速度是必需的或您有很多时间:
您可以尝试使用其他表库或构建自己的表库。