分页如何在api系统中工作（前端是angular2，后端是laravel5.4）？

Question

我有一个酒店预订项目，使用angular2创建前端，使用laravel创建后端，这是一个API系统。我在angular2中有一张表。为此，我从laravel获取了预订数据，并将其绑定在角度表中，但是我不知道分页如何通过api工作。最初，我仅获取并绑定了15个数据。当我们单击下一页时，如何访问更多数据。这是laravel angular的代码。

拉拉韦尔

public function index()
{
   $bookings = Booking::where('is_delete', 0)
            ->paginate(15);

   return response()->json(['bookingDetails' => $bookings], 200);
}

角度2

booking.service.ts

import { Injectable } from '@angular/core';
import { Headers, Http, Response } from '@angular/http';

import { Bookings } from './booking';

import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/map';
import 'rxjs/Rx';
import { Observable } from "rxjs";

@Injectable()
export class BookingService {
    private headers = new Headers({'Content-Type': 'application/json'});
    private _url: string = 'http://cabinapi.app/api/bookings/';
    /*private _url: string = 'apidata/testData.json';*/
    constructor(private http: Http) { }

    getBooking(): Observable<any> {
        return this.http.get(this._url)
            .map((response: Response) => response.json().bookingDetails.data as Bookings[])
            .catch(this.handleError);
    }
    private handleError(error: any): Promise<any> {
        console.error('An error occurred', error); // for demo purposes only
        return Promise.reject(error.message || error);
    }
}

booking.component.ts

import { Component, OnInit } from '@angular/core';

import { BookingService } from './booking.service';
import { Bookings } from './booking';
@Component({
    selector: 'booking',
    templateUrl: './booking.component.html'
})
export class BookingComponent implements OnInit {
    bookings: Bookings[];
    constructor(private employeeService: BookingService) {}
    getBooking(): void {
        /*this.employeeService.getEmployee().then(employees => this.employees = employees);*/
        this.employeeService.getBooking().subscribe(bookings => this.bookings = bookings);
    }
    ngOnInit(): void {
        this.getBooking();
        setTimeout(function () {
            $(function() {
                $("#dataTable").DataTable();
            });
        }, 1000);
    }
}

Answer 1

以下是构建与本机Laravel分页系统配合使用的分页Angular UI的方法：

首先，要提供帮助，请创建Booking和PaginatedBooking类（我的预订很简单，只有一个说明-根据需要进行自定义）：

booking.model.ts：

export class Booking {
  id: number;
  description: string;
}

paginated-booking.model.ts： 表示Laravel返回的分页数据

import { Booking } from './booking.model'

export class PaginatedBooking {
  current_page: number;
  data: Booking[];
  from: number;
  last_page: number;
  next_page_url: string;
  path: string;
  per_page: number;
  prev_page_url: string;
  to: number;
  total: number;
}

然后创建您的服务以获取分页的预订数据。添加一个getBookingsAtUrl(url)功能-当您按下prev / next按钮时，我们将在稍后使用它向Laravel请求特定的分页数据集：

booking.service.ts

export class BookingService {
    private bookingUrl: string = '/api/bookings'
    constructor(private http: Http) { }

    getBookings(): Promise<PaginatedBooking>{
        return this.http.get(this.bookingUrl)
        .toPromise()
        .then(response => response.json() as PaginatedBooking)
        .catch(this.handleError);
    }

    getBookingsAtUrl(url: string): Promise<PaginatedBooking>{
        return this.http.get(url)
        .toPromise()
        .then(response => response.json() as PaginatedBooking)
        .catch(this.handleError);
    }

    private handleError(error: any): Promise<any> {
        console.error('An error occurred', error); // for demo purposes only
        return Promise.reject(error.message || error);
    }
}

在您的组件中，实施ngOnInit()以获得您的初始预订数据。然后实现一个getPrev()功能和一个nextPage()功能，当这些按钮被点击时调用“预订服务”：

booking.component.ts：

export class BookingComponent implements OnInit {
  bookings:PaginatedBooking;
  constructor(private service: NativeBookingService) { }

  ngOnInit() {
    this.service.getBookings().then(bookings=>this.bookings = bookings);
  }

  prevPage() {
    this.service.getBookingsAtUrl(this.bookings.prev_page_url).then(bookings=>this.bookings = bookings);
  }

  nextPage() {
    this.service.getBookingsAtUrl(this.bookings.next_page_url).then(bookings=>this.bookings = bookings);
  }
}

最后，您的组件模板：

booking.component.html：

<div *ngIf="bookings">
  <ul>
    <li *ngFor="let booking of bookings.data">{{booking.description}}</li>
  </ul>
  <p>Showing booking {{bookings.from}} to {{bookings.to}} of {{bookings.total}}</p>
  <p>Page {{bookings.current_page}} of {{bookings.last_page}}</p>
  <button (click)="prevPage()" [disabled]="!bookings.prev_page_url" >Prev</button>
  <button (click)="nextPage()" [disabled]="!bookings.next_page_url">Next</button> 
</div>

那应该做到的。为了简洁起见，我省略了一些输入。根据需要自定义模板。我在这里有一个示例项目，演示了它们如何组合在一起，但是请注意，我的Angular文件的命名略有不同，并且我添加了一个简单的加载状态：

https://github.com/SpaceFozzy/laravel-angular-pagination

您可以在此处观看现场演示。

祝好运！