angular - PrimeNG 数据滚动条条件加载器

Question

我正在尝试在我的一个模块中实现PrimeNG Data Scroller。我想显示“显示更多”按钮以仅在有更多数据要显示时才加载数据，也就是说，如果我的数组的计数超过 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>

标签： angularprimeng

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;
}