Как я могу создать это в angular?

Question

введите описание изображения здесь Я пробовал составить этот мат-лист. но я также должен добавить нумерацию страниц, поиск и фильтрацию. Любая помощь будет оценена по достоинству.

Answer 1

Вам сложно помочь, не поделившись кодом, но я постараюсь. Прежде всего инициализируйте данные пагинатора в вашем component.ts и создайте функцию для обработки событий:

А затем, на ваш взгляд, добавьте пагинатор. Когда пользователь изменяет индекс или каждое свойство paginator, сделайте http-запрос для получения данных. Некоторые серверные языки поддерживают разбиение на страницы (например, Springboot с Jpa Repository).

      <mat-list-item *ngFor="let data of myData">
  <h1 mat-line>{{data.title}}</h1>
  <div mat-line>{{data.description}}</div>
  <!-- insert your own data -->
</mat-list-item>

<mat-paginator [length]="length"
               [pageSize]="pageSize"
               [pageSizeOptions]="pageSizeOptions"
               [pageIndex]="pageIndex"
               (page)="handlePageEvent($event)">
</mat-paginator>