PrimeNG datascroller условный загрузчик

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 в своем компоненте для любой функции получения и т. Д. Примером этого может быть пример:

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