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>

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

PrimeNG datascroller条件加载器

1 个答案: