PrimeNG数据采集器条件加载程序

Question

我正在尝试在我的一个模块中实现PrimeNG数据滚动器。我想显示"显示更多"按钮来加载数据，只有当有更多的数据要显示时，也就是说，如果我的数组计数超过5左右。

我尝试过创建变量并使用ngIf，但按钮操作停止工作。这是我的代码片段-

<p-dataScroller [value]="filteredComments" [rows]="5" [loader]="loadButton">
<p-header>
..removed code for better clarity
</p-header>
<ng-template let-comment pTemplate="item">
.. removed code for better clarity
</ng-template>
<p-footer *ngIf="filteredComments.length > 5">
<span class="button btn-header btn-orange loaderButton" #loadButton>
Show More
</span>
</p-footer>
</p-dataScroller>

Answer 1

我最终通过使用"可见"css样式解决了这个问题。这并不理想，我不知道为什么组件本身没有解决这个问题，但这里有一种方法可以在不扩展组件的情况下自行解决这个问题：

<p-footer [style.visibility]="isMoreToLoad ? 'visible' : 'hidden'">
<span class="button btn-header btn-orange loaderButton">
</span>
</p-footer>

然后，您可以将组件中的isMoreToLoad条件设置为任何getter函数等。类似这样的情况就是一个例子：

get isMoreToLoad() : boolean {
return this.filteredComments.length < this.totalFilteredComments;
}