primeng p表：在virtualScroll模式下延迟加载时的单元格边界可见性

Question

在惰性加载模式下滚动时，primem表显示空白单元格，并且所有单元格边框均可见。但是，当在我的应用程序中尝试此操作时，我只会看到当前加载的单元格。仅在加载内容之后，表格才会显示整个单元格，请参见图片：

如何实现？

我使用的是Primeng示例中的标准p表，没什么特别的。 src \ styles.css看起来像这样：

<p-table [columns]="cols" [value]="virtualCars" [scrollable]="true" [rows]="20" scrollHeight="450px" [virtualScroll]="true" (onLazyLoad)="loadDataOnScroll($event)"
    [lazy]="true" [totalRecords]="totalRecords" [virtualRowHeight]="28"  [loading]="loading">
    <ng-template pTemplate="header" let-columns>

...

@import '../node_modules/primeng/resources/themes/nova-light/theme.css';
@import '../node_modules/primeng/resources/primeng.min.css';
@import '../node_modules/primeng/resources/components/table/table.css';
@import '../node_modules/primeicons/primeicons.css';

Answer 1

您必须定义加载主体模板。像这样：

<ng-template pTemplate="header" let-columns>
  <tr>
    <th *ngFor="let col of columns" pReorderableColumn>
      {{col.header}}
    </th>
  </tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
  <tr>
    <td *ngFor="let col of columns">
      {{rowData[col.field]}}
    </td>
  </tr>
</ng-template>
<ng-template pTemplate="loadingbody" let-columns="columns">
  <tr>
    <td *ngFor="let col of columns">
      <div>loading ...</div>
    </td>
  </tr>
</ng-template>