Как добавить нумерацию страниц в таблицу материалов angular, которая привязывается к ответу API

Я новичок в угловых. В моем проекте показан список продуктов и его работа корректно.

Мой HTML-код ниже:

<table mat-table [dataSource]="list_product" style="width: 20%;">
 <!-- id Column -->
 <ng-container matColumnDef="id" style="width: 20%;">
 <th mat-header-cell *matHeaderCellDef style="align-items: center;"> id </th>
 <td mat-cell *matCellDef="let list_product"> {{list_product.id}} </td>
 </ng-container>
 <!-- description Column -->
 <ng-container matColumnDef="description">
 <th mat-header-cell *matHeaderCellDef> Name </th>
 <td mat-cell *matCellDef="let list_product"> {{list_product.description}} </td>
 </ng-container>
 <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
 <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

и мой код TypeScript -

import { Component, OnInit,ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { analyzeAndValidateNgModules } from '@angular/compiler';
import { MatPaginator} from '@angular/material/paginator';
import { MatTableDataSource} from '@angular/material/table';
@Component({
 selector: 'app-basic',
 templateUrl: './basic.component.html',
 styleUrls: ['./basic.component.scss']
})
export class BasicComponent implements OnInit {
 public list_product:any=[];
 displayedColumns: string[] = ['id', 'description'];
 @ViewChild(MatPaginator) paginator: MatPaginator;
 constructor(private http:HttpClient) { }
 ngOnInit(): void {
 this.get_data();
 this.list_product.paginator = this.paginator;
 }
 get_data(){
 this.http.get<any>("http://localhost:3000/listp").subscribe(
 res => this.list_product = res
 )
 }
}

Пагинация не работает, показывается весь список. Кнопки пагинации не работают в html файле.

Решение проблемы

Для разбиения на страницы на стороне клиента в MatTableDataSourceнего встроены функции разбиения на страницы, сортировки и фильтрации.

Следуйте инструкциям ниже -

Используйте MatTableDataSourceтип как dataSourceи инициализируйте его пустым массивом

Установите dataсвойство MatTableDataSourceпосле получения данных

Получить ссылку на таблицу paginatorс@ViewChild

Реализовать AfterViewInitустановку paginatorсвойства MatTableDataSourceпосле инициализации представления.

Ваш окончательный код компонента должен выглядеть примерно так:

export class BasicComponent implements OnInit, AfterViewInit {
 
 public list_product = new MatTableDataSource<any>([]); // <-- STEP (1)
 displayedColumns: string[] = ['id', 'description'];
 @ViewChild(MatPaginator) private paginator: MatPaginator; // <-- STEP (3)
 constructor(private http:HttpClient) { }
 ngOnInit(): void {
 this.get_data();
 }
 get_data(){
 this.http.get<any>("http://localhost:3000/listp").subscribe(
 res => this.list_product.data = res // <-- STEP (2)
 );
 }
 
 ngAfterViewInit(): void {
 this.list_product.paginator = this.paginator; // <-- STEP (4)
 }
}

Вы должны изучить документацию для получения дополнительной информации.