Пагинация в Angular: Руководство
В этом уроке мы научим вас создавать пагинацию на стороне сервера в приложении Angular. Мы будем получать данные с сервера с помощью Rest Api и отображать данные в таблице пользовательского интерфейса в компоненте Angular с модулем разбивки на страницы. Чтобы создать компонент пагинации в angular, мы будем использовать пакет пагинации npx.
Добавление модуля пагинации Ngx
Теперь мы собираемся установить ngx-pagination в нашем приложении angualr.
npm install ngx-pagination
Обновление класс модуля приложения
Откройте файл app/app.module.ts , импортируйте пакеты NgxPaginationModule и HttpClientModule, а также внедрите их в массив imports.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgxPaginationModule } from 'ngx-pagination';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
NgxPaginationModule,
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
Настройка Angular Service
Нам нужен сервис, в котором мы можем написать код для вызова API, который получает данные для нашего серверного компонента разбивки на страницы angular.
ng g s services/students
Как только мы выполнили указанную выше команду, была создана папка services и файл student.service.ts . Откройте файл и добавьте в него предложенный код.
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root',
})
export class StudentsService {
private url = 'https://reqres.in/api/users';
constructor(private httpClient: HttpClient) {}
getStudents(page: number) {
return this.httpClient.get(this.url + '?page=' + page);
}
}
Реализация пагинации в Angular
Перейдите к файлу app.component.ts , импортируйте StudentService, внедрите его в метод конструктора, создайте функцию, вызовите метод getStudents() и установите нумерацию страниц.
import { Component, OnInit } from '@angular/core';
import { StudentsService } from './services/students.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
Students: any;
allStudents: number = 0;
pagination: number = 1;
constructor(private studentsService: StudentsService) {}
ngOnInit() {
this.fetchStudents();
console.log(this.fetchStudents());
}
fetchStudents() {
this.studentsService.getStudents(this.pagination).subscribe((res: any) => {
this.Students = res.data;
this.allStudents = res.total;
console.log(res.total);
});
}
renderPage(event: number) {
this.pagination = event;
this.fetchStudents();
}
}
Далее нам нужно найти файл app.component.html в папке src/ , затем вставить в файл указанный код и создать представление для элементов таблицы и пагинации.
<div class="container mt-5">
<h2 class="mb-3 text-center">Angular 16 Server Side Pagination Example</h2>
<table class="table">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">First name</th>
<th scope="col">Last name</th>
<th scope="col">Email</th>
</tr>
</thead>
<tbody>
<tr
*ngFor="
let student of Students
| paginate
: {
itemsPerPage: 6,
currentPage: pagination,
totalItems: allStudents
}
"
>
<td scope="row">{{ student.id }}</td>
<td>{{ student.first_name }}</td>
<td>{{ student.last_name }}</td>
<td>{{ student.email }}</td>
</tr>
</tbody>
</table>
<div class="d-flex justify-content-center">
<pagination-controls
(pageChange)="renderPage($event)"
></pagination-controls>
</div>
</div>
Запуск сервера разработки
Теперь мы собираемся протестировать приложение angular, обязательно запустите приложение angular и протестируйте приложение по следующему URL-адресу.
ng serve --open
http://localhost:4200
Заключение
В этом руководстве по примерам разбивки на страницы в Angular мы узнали, как создать модуль разбиения на страницы и отобразить данные с разбивкой на страницы с помощью таблицы в приложении Angular.