Как выполнить разбиение на страницы на сервере под углом с ядром платформы сущностей

Question

Я пропускаю и беру данные в классе контроллеров, как сделать нумерацию страниц по угловым

Мой класс контроллеров

public IEnumerable<ScrapeTime> scrapeTime(int? page, int pagesize=10)
  {
var countDetails = _context.ScrapeTime.Count();
 return _context.ScrapeTime.Skip((page ?? 0) * pagesize).Take(pagesize).ToList();
}

Мой файл component.ts

constructor(http: HttpClient,  @Inject('BASE_URL') baseUrl: string) {

      http.get<scrapeTime[]>(baseUrl + 'api/ScrapeTime/ScrapeTime').subscribe(result => {

        this.Time = result;

      }, error => console.error(error));
  }

Выходные данные будут отображать только 10 данных на стороне, мне нужно сделать пагинацию для всех данных.

Answer 1

Выполните следующие шаги, чтобы выполнить ваши требования:

1. Определите модель, которая будет возвращать количество элементов и сведения об элементе:

   public class PageResult<T>
   {
       public int Count { get; set; }
       public int PageIndex { get; set; }
       public int PageSize { get; set; }
       public List<T> Items { get; set; }
   }
   

2. Действие контроллера

   public PageResult<ScrapeTime> scrapeTime(int? page, int pagesize = 10)
   {
       var countDetails = _context.ScrapeTime.Count();
       var result = new PageResult<ScrapeTime> {
           Count = countDetails,
           PageIndex = page ?? 1,
           PageSize = 10,
           Items = _context.ScrapeTime.Skip((page - 1 ?? 0) * pagesize).Take(pagesize).ToList()
       };
       return result;
   }
   

3. Угловая модель

   class PageResult<T>
   {
       count: number;
       pageIndex: number;
       pageSize: number;
       items: T[];
   }
   

4. Угловое действие

   export class FetchDataComponent {
   private http: HttpClient;
   private baseUrl: string;
   public Time: scrapeTime[];
   public pageNumber: number = 1;
   public Count: number;
   constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
       this.http = http;
       this.baseUrl = baseUrl;
   
       http.get<PageResult<scrapeTime>>(baseUrl + 'api/ScrapeTime/ScrapeTime').subscribe(result => {
       this.Time = result.items;
       this.pageNumber = result.pageIndex;
       this.Count = result.count;
       }, error => console.error(error));
   }
   
   public onPageChange = (pageNumber) => {
       this.http.get<PageResult<scrapeTime>>(this.baseUrl + 'api/ScrapeTime/ScrapeTime?page=' + pageNumber).subscribe(result => {
       this.Time = result.items;
       this.pageNumber = result.pageIndex;
       this.Count = result.count;
       }, error => console.error(error));
   }
   }
   

5. Просмотр

   <table>
       <tr *ngFor="let item of Time | paginate: { itemsPerPage: 10, currentPage: pageNumber, totalItems:Count }">
           <!-- content here -->
           <td>{{ item.id }}</td>
           <td>{{ item.name }}</td>
       </tr>
       <pagination-controls (pageChange)="onPageChange($event)"></pagination-controls>
   </table>
   

Если у вас есть какие-либо проблемы с угловым разбиением на страницы, выполните ngx-pagination