代码之家 › 专栏 › 技术社区 › Raj

准备datascroller条件加载程序

primeng angular

0

Raj · 技术社区 · 7 年前

我在努力实现 PrimeNG Data Scroller 在我的一个模块里。我想显示'show more'按钮,只在有更多数据要显示时加载数据,例如,如果我的数组的计数大于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>

1 回复 | 直到 7 年前

1

0

user1475355 7 年前

最后我用“可见”的css样式解决了这个问题。这是不理想的,我不确定为什么组件本身没有考虑到这一点,但是这里有一种方法可以在不扩展组件的情况下自己解决这个问题:

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

然后,您可以在组件中将ismoretload条件设置为任何getter函数等。

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