通过 Angular 10 中的按钮单击导航答案

【问题标题】：Navigation via button click in Angular 10通过 Angular 10 中的按钮单击导航
【发布时间】：2021-08-11 19:20:41
【问题描述】：

我有一个名字列表，我想在每个页面上只显示其中的 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>

提前致谢。

【问题讨论】：

标签： button onclick navigation

【解决方案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
   }

【讨论】：