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