Блог

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

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

 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 = resu<

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

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

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

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 resu<
   }
     

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

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

4. Действие Angular

    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>
     

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