在Angular 10中，通过点击按钮进行导航

Question

我有一个名字列表，我想在每个页面上只显示其中的5个。用户可以通过点击"下一步"按钮查看接下来的5个名字。
我如何在Angular中设置按钮的click属性来为我做这件事呢?

这是我的。html文件:

<div class="container">
<table class="table" >
<tbody *ngFor="let name of names.slice(index, index+ 5)">
<tr>   <td>{{ name.value}} </td> </tr>
</tbody>
</table>
<button type="button" class="btn btn-primary" style ="float: left" (click)="previousFunction()"> < Previous </button>
<button type="button" class="btn btn-primary" style ="float: right" (click)="nextFunction()"> Next > </button>
</div>

提前感谢。

Answer 1

这个问题很容易解决…

下面是html代码:

<div class="container">
<table class="table" >
<tbody *ngFor="let name of names.slice(index, index+ 5)">
<tr>   <td>{{ name.value}} </td> </tr>
</tbody>
</table>
<button type="button" class="btn btn-primary" style ="float: left" (click)="previousFunction($event, index)"> < Previous </button>
<button type="button" class="btn btn-primary" style ="float: right" (click)="nextFunction($event, index)"> Next > </button>
</div>

，下面是。ts代码:

export class AppComponent {
constructor() { }
index: number = 0;
pageSize: number = 5;
names = [
{ name: 'a'},
{ name: 'b'},
{ name: 'c'},
{ name: 'd'},
{ name: 'e'},
{ name: 'f'},
{ name: 'g'},
{ name: 'h'},
{ name: 'i'},
{ name: 'j' },
];
previousFunction($event: any, count: any){
this.index = count - this.pageSize
}
nextFunction($event: any, count: any){
this.index = count + this.pageSize
}