javascript - Angular - 将更多项目加载到列表中

Question

我是 Angular 的新手，我正在尝试在我的项目上做一些类似 loadMore 或 ShowMore 按钮的事情，我被困在这里，所以和你们在一起知道一些可以帮助我的事情，我将不胜感激。

我有一个包含 10 个元素的列表，如果我的用户超过 10 个，我们将有一个 showMore 按钮来单击并加载这些其他元素。

我正在尝试如何做到这一点，但这是我的第一个项目，我对此感到困惑。

<div fxFlex fxLayout="row" fxLayoutAlign="center center" style="padding-top: 16px;">
<button (click)="showMore()" mat-button color="accent" style="width: 100%" value="bold">Show More</button>
</div>

showMore(){

this.pageSize = this.pageIndex + 1;

this.get(10, this.pageIndex, 'Recents'); 
}

直到这一刻，我都在尝试更改当前的 pageIndex 并移动到包含其他元素的下一个。我的索引开始是 0。“最近”是我要过滤的报告状态。

Answer 1

模板:

<div *ngFor="let item of items">
  msg{{item}}
</div>

<input type="button" (click)="LoadMore()" value="showMore">

组件:

currentIndex = 10;
items = [...Array(currentIndex).keys()];

constructor(private crd: ChangeDetectorRef){}

LoadMore(){
  currentIndex += 10;
  this.items = [...Array(currentIndex).keys()];
  this.cdr.detectChanges();
}