增量在上一个，下一个按钮Angular 4中不起作用

Question

I had to create a prev and next component to go to the next page using router from Angular. The issue is not about angular, but about the incrementing and decrementing logic.

When I click next first time is ok, but second time I have to click twice to see the next page. The same is happening with prev button. If I want to click back, after I clicked first next, I have to click twice to go to prev page.

I looked and I looked and don't see where is the bug.

HTML file

<button class="btn btn-primary" (click)="prevPage()">Prev</button>  
<button class="btn btn-primary" (click)="nextPage()">Next</button>

TS file

pages = [
 {name: '../page1', index: 0}, 
 {name: '../page2', index: 1}, 
 {name: '../page3', index: 2}
];
current = this.pages[0];

getIndex(currentIndex: number, shift: number){
 const lenght = this.pages.length;
 const incre = (((currentIndex + shift) + lenght) % lenght);
 console.log(incre);
 return incre;
}

prevPage() {
 const i = this.getIndex(this.current.index, -1);
 this.current = this.pages[i];
 this.router.navigate([this.current.name], { relativeTo: this.route });
 console.log(this.current.name);  
}

nextPage() {
 const i = this.getIndex(this.current.index, 1);
 this.current = this.pages[i];
 this.router.navigate([this.current.name], { relativeTo: this.route });
 console.log(this.current.name);   
}

Answer 1

in the HTML file.

<button class="btn btn-primary" (click)="prevPage()">Prev</button>  
<button class="btn btn-primary" (click)="nextPage()">Next</button>

change the (click) listener to nextPage().

plus, it is not make sense the ( + length) in

const incre = (((currentIndex + shift) + lenght) % lenght);

it will work fine without it!.

const incre = ((currentIndex + shift) % lenght);