如何使用Django Rest Framework API分页Angular2 [英] How To Pagination Angular2 with Django Rest Framework API

问题描述

我正在尝试使用Angular2和Django Rest Framework创建一个简单的博客应用程序.我正在Django中实现分页，但是我不知道如何在Angular中渲染它.

I am trying to create a simple blog application using Angular2 with Django Rest Framework. I am implementing pagination in Django, but I do not know how to rendering it in Angular.

API具有以下结构.每5个条目分页一次.

API has the following structure. Entries are paginated every 5 entries.

ng2app/src/app/models/entries.model.ts

ng2app/src/app/models/entries.model.ts

export interface IEntries {
  count: any,
  next: any,
  previous: any,
  results: IResults[]
}

export interface IResults {
  title: string,
  body: string,
  created_at: any,
  updated_at: any
}

ng2app/src/app/services/entries.service.ts

ng2app/src/app/services/entries.service.ts

import { Injectable } from "@angular/core";
import { Http } from "@angular/http";
import 'rxjs/add/operator/toPromise';

import { IEntries } from '../models/entries.model';

@Injectable()
export class EntriesService {

  constructor(
    private http: Http
  ){
  }

  getEntries(page: number){
    return this.http
      .get(`http://127.0.0.1:8000/api/entries/?limit=5&offset=` +((page * 5)-5))
      .toPromise()
      .then(response => response.json())
      .catch(this.handleError);
  }

  private handleError(error: any) {
    console.error('An error occurred', error);
    return Promise.reject(error.message || error);
  }

}

ng2app/src/app/services/entries.component.ts

ng2app/src/app/services/entries.component.ts

import { Component, OnInit } from '@angular/core';
import { EntriesService } from '../services/entries.service';
import { IEntries } from '../models/entries.model';


@Component({
  selector: 'my-entries',
  templateUrl: '../templates/entries.component.html',
  styleUrls: ['../static/entries.component.css']
})
export class EntriesComponent implements OnInit{
  title = 'entries';
  entries: IEntries[] = [];
  error: any;

  public constructor(
    private entriesService: EntriesService,
  ){}

  getEntires(page :number) {
    this.entriesService
      .getEntries(page)
      .then(entries => this.entries = entries)
      .catch(error => this.error = error);
  }

  ngOnInit() {
    this.getEntires(1);
  }
}

ng2app/src/app/templates/entries.component.html

ng2app/src/app/templates/entries.component.html

<div class="container">
  <h2>{{title}}</h2>
  <div class="panel panel-default" *ngFor="let results of entries.results">
    <div class="panel-heading"><a href="detail/{{ results.id }}">{{ results.title }}</a></div>
    <div class="panel-body pre-wrap" ng-bind="multiLineText">{{ results.body }}</div>
    <div class="panel-footer">{{ results.created_at | date}}</div>
  </div>
  <nav *ngIf="entries.count > 5">
      (I want to display pagination here)
  </nav>
</div>

在这种情况下，请帮助实现分页.

In such a case, please help how to implement Pagination.

推荐答案

在Django后端中实现分页之后，查询后端将以以下格式返回结果:

After implementing pagination in the Django backend, querying the backend would return results in the following format:

"data": {
   "count": ,
   "next": "",
   "previous": "",
   "results": []
}

数量:返回的商品总数.

count: The total number of items returned.

下一个:执行分页后下一个项目的URL

next: The URL to the next items after performing pagination

上一个:导航到下一个项目后的上一个项目的URL.项目集

previous: The URL to the previous items after you have navigated to the next. set of items

结果:从后端请求的项目显然是分页的，即，如果将分页设置为10个项目并返回了15个，则结果会在第一个返回10个项目请求，然后导航到 next 中的URL后，结果将返回剩余的5.

results: The items requested for from the backend, paginated obviously i.e if pagination was set to 10 items and 15 were returned, results would return 10 items on the first request, then after navigating to the URL in next, results would return the remaining 5.

服务

@Injectable({
  providedIn: "root"
})
export class OurService {  
  constructor(private http: HttpClient) {}

  // Here,we make our request to the backend API, this observer takes in the backend
  // api url as a parameter and performs a GET request
  getAllTransactions(APIUrl: string): Observable<any> {
    return this.http.get<>(APIUrl);
  }
}

组件

@Component({
  selector: "app-transactions",
  templateUrl: "./transactions.component.html",
  styleUrls: ["./transactions.component.scss"]
})
export class TransactionsComponent implements OnInit {
  transactions: Transacton[];
  transactionsUrl = "http://.../api/v1/transactions/"; //url to query for the transactions
  next: string;
  previous: string;

  constructor(private transactionService: TransactionService) {}

  ngOnInit(): void {
    // On component initialization, load the transactions on the page
    this.getTransactions(this.transactionsUrl);
  }

  getTransactions(url: string) {
    this.transactionService.getAllTransactions(url).subscribe(res => {
      this.transactions = res.data.results;
      if (res.data.next) {
        // set the components next transactions here from the response
        this.next = res.data.next;
      }

      if (res.data.previous) {
        // set the components previous transactions here from the response
        this.previous = res.data.previous;
      }
    });
  }

  // function fetches the next paginated items by using the url in the next transactions
  fetchNext() {
    this.getTransactions(this.next);
  }

  // function fetches the previous paginated items by using the url in the previous transactions
  fetchPrevious() {
    this.getTransactions(this.previous);
  }

HTML

<div class="page-buttons">
  <button class="btn prev" (click)="fetchPrevious()">
  </button>
  <button class="btn next" (click)="fetchNext()">
  </button>
</div>

这篇关于如何使用Django Rest Framework API分页Angular2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！