Angular 如何使用entity framework core进行服务器端分页

我跳过并获取控制器类中的数据，如何对数据进行分页

我的控制器类

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

public IEnumerable scrapeTime（int？page，int pagesize=10）
{
var countDetails=_context.ScrapeTime.Count（）；
return _context.ScrapeTime.Skip（（第0页）*pagesize.Take（页面大小）.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));
  }

构造函数（http:HttpClient，@Inject（'BASE_URL'）baseUrl:string）{
http.get（baseUrl+'api/ScrapeTime/ScrapeTime'）。订阅（结果=>{
时间=结果；
}，error=>console.error（error））；
}

---

输出将只在侧面显示10个数据，我需要对所有数据进行分页。

按照以下步骤实现您的要求：

定义将返回项目计数和项目详细信息的模型：

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

公共类页面结果
{
公共整数计数{get；set；}
公共int页索引{get；set；}
公共int PageSize{get；set；}
公共列表项{get；set；}
}

控制器动作

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

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));
}
}

publicpageresult-scraptime（int？page，int pagesize=10）
{
var countDetails=_context.ScrapeTime.Count（）；
var result=新页面结果{
Count=countDetails，
PageIndex=第1页，
PageSize=10，
Items=\u context.ScrapeTime.Skip（（页面-1×0）*pagesize.Take（页面大小）.ToList（）
};
返回结果；
}

角度模型

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

class页面结果
{
计数：数字；
页面索引：编号；
页面大小：数字；
项目:T[];；
}

角作用

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

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));
}
}

导出类FetchDataComponent{
私有http:HttpClient；
私有baseUrl:string；
公共时间：公共时间[]；
公共页码：页码=1；
公众计数：数字；
构造函数（http:HttpClient，@Inject（'BASE_URL'）baseUrl:string）{
this.http=http；
this.baseUrl=baseUrl；
http.get（baseUrl+'api/ScrapeTime/ScrapeTime'）。订阅（结果=>{
this.Time=result.items；
this.pageNumber=result.pageIndex；
this.Count=result.Count；
}，error=>console.error（error））；
}
公共onPageChange=（页码）=>{
this.http.get（this.baseUrl+'api/ScrapeTime/ScrapeTime？page='+页码）。订阅（结果=>{
this.Time=result.items；
this.pageNumber=result.pageIndex；
this.Count=result.Count；
}，error=>console.error（error））；
}
}

看法

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

{{item.id}
{{item.name}

---

如果角度分页有任何问题，请按照

操作。您必须将例如页码和页面大小发送到后端，并返回所需数据。您需要从时间表中的现有行中获取页面总数，然后执行分页