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

角度-将更多项目加载到列表中

1 个答案: