You can find example here in this StackBliz Link
Inside you table tr click I have added new method parameter like below..
<tr class="record-row" (click)="viewUser(user, i, filteredUsers)"
*ngFor="let user of filteredUsers;let i = index">
and Inside your component viewUser() method is...
viewUser(user: any, index, filterData) {
this.isView = true;
console.log(user, index, filterData);
this.userObj = user;
this.currentIndex = index;
this.allUserTableData = filterData;
}
In above i have added two new class-variable currentIndex
and allUserTableData
. based on this two data variable next and previous traversal is looks like below code...
now.. next traversal code is
nextRecord() {
let next = (this.currentIndex += 1);
if (next > this.allUserTableData.length - 1) {
this.currentIndex = 5;
return;
}
let nextRecord = this.allUserTableData[next];
this.userObj = nextRecord;
console.log(nextRecord, next);
}
previouse traversal code is
previousRecord() {
let next = (this.currentIndex -= 1);
if (next < 0) {
this.currentIndex = 0;
return;
}
let nextRecord = this.allUserTableData[next];
this.userObj = nextRecord;
console.log(nextRecord, next);
}
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…