Кнопка Angular «Предыдущая страница» отключается при нажатии кнопки следующей страницы ⇐ CSS

[Anonymous]

Привет, я новичок в angular и пытаюсь реализовать нумерацию страниц в своем API и пользовательском интерфейсе. Я протестировал и интегрировал нумерацию страниц в свой API, но бот может правильно реализовать нумерацию страниц в моем пользовательском интерфейсе. Поэтому я застреваю, когда нажимаю кнопку следующей страницы. Я не могу перейти на предыдущую страницу, и на первой странице отображается 1/2 (сейчас я имею дело с базой данных только с двумя записями), но когда я нажимаю на следующую страницу он показывает 1/1, загружается следующая запись, а моя предыдущая кнопка отключается.
Это мой html-файл



Это мой файл компонент.ts
import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { NewPatientComponent } from 'src/app/core/dialogs/new-patient/new-patient.component';
import { PatientVisitComponent } from 'src/app/core/dialogs/patient-visit/patient-visit.component';
import { PatientService } from 'src/app/core/service/patient/patient.service';
import { AbhaRegistrationComponent } from '../abha-registration/abha-registration.component';
import { Router } from '@angular/router';
import { ActivatedRoute } from '@angular/router';
import { MatPaginator, PageEvent } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';

@Component({
selector: 'app-patient',
templateUrl: './patient.component.html',
styleUrls: ['./patient.component.css'],
})
export class PatientComponent implements AfterViewInit {
pageSize = 1;
length = 0;
pageIndex = 0;
pageSizeOptions = [5, 10, 25];
currentPage = 0;

hidePageSize = false;
showPageSizeOptions = true;
showFirstLastButtons = true;
disabled = false;

tableColumns: string[] = ['id', 'name', 'address', 'dateOfBirth', 'actions'];
selectedPatient: any;
public dataSource = new MatTableDataSource([]);

@ViewChild(MatPaginator) private paginator: MatPaginator;

constructor(
private dialog: MatDialog,
private patientService: PatientService,
private router: Router,
private route: ActivatedRoute
) {}

ngAfterViewInit(): void {
this.getAllPatients();
this.dataSource.paginator = this.paginator;
}

loadPage(event: PageEvent): void {
if (event.pageIndex > this.currentPage) {
// Navigating to the next page
this.currentPage = event.pageIndex;
} else if (event.pageIndex < this.currentPage) {
// Navigating to the previous page
this.currentPage = event.pageIndex;
}

this.pageSize = event.pageSize;
this.getAllPatients();
}

getAllPatients() {
this.patientService
.getAllPatients(this.currentPage, this.pageSize)
.subscribe(
(res) => {
if (res && res.content) {
this.dataSource.data = res.content;
this.length = res.totalElements;
} else {
console.error('API response is missing expected data:', res);
}
},
(err) => {
console.error('Error getting patients:', err);
}
);
}

newPatientDialog() {
this.dialog.open(NewPatientComponent).afterClosed().subscribe((res) => {
this.getAllPatients();
});
}

openVisitDialog(patient: any) {
this.dialog.open(PatientVisitComponent, {
data: patient,
});
}

openAbhaDialog(patient: any) {
this.router.navigateByUrl('/abha', { state: patient });
}

applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value.trim().toLowerCase();
this.dataSource.filter = filterValue;
this.dataSource.filterPredicate = this.customFilterPredicate();
}

customFilterPredicate() {
return (data: any, filter: string) => {
const name = `${data.firstName} `.toLowerCase();
return name.includes(filter);
};
}
}


Подробнее здесь: https://stackoverflow.com/questions/773 ... n-gets-cli