首页 > 解决方案 > Angular - Angular 7 中的服务器端分页错误

问题描述

我正在使用 Angular 7 前端和 Laravel 后端来构建一个应用程序。我想在我的页面上进行服务器端分页,我的灵感来自分页链接

Laravel 后端

 public function indexSmsmo()
{
    if(Auth::user()->id == 1)
        $smsmos = Smsmo::paginate(5);
    else 
    $smsmos = Smsmo::where('user_id',Auth::user()->id)->paginate(5);
    return $smsmos;      
}  

如上所示,我从 Laravel 后端启动它。然后继续 Angular

角度:

型号:smsmo.ts

export class Smsmo {
id: number;
msisdn: string;
message: string;
short_code_called: string;
packaged_id: string;
error_message: string;
error_code: string;
telco: string;
user_id: number;

user?: User;
telcoId?: Telco;
package?: Package;

constructor() {}
}

服务:smsmo.service.ts

// App import
import { Smsmo } from '../models/smsmo';
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { Ng4LoadingSpinnerService } from 'ng4-loading-spinner';
import { environment } from 'src/environments/environment.prod';
import { HttpErrorHandler, HandleError } from '../shared/_services/http-handle-error.service';
@Injectable({
  providedIn: 'root'
})

export class SmsmoService {

private readonly apiUrl = environment.apiUrl;
private smsmoUrl = this.apiUrl;
private handleError: HandleError;  

constructor(
private http: HttpClient,
httpErrorHandler: HttpErrorHandler ) {
  this.handleError = httpErrorHandler.createHandleError('SmsmoService');
}

/** GET smsmos from smsmos endpoint */
getSmsmos (page): Observable<Smsmo[]> {
return this.http.get<Smsmo[], page>(this.smsmoUrl + '/indexSmsmo')
.pipe(
  catchError(this.handleError('getSmsmos', []))
);
}

问题是,为什么我在服务中出现红线错误,我该如何解决。我的意思是如何将页面集成到我的 server.ts 中。有关详细信息,请参见图表。

在此处输入图像描述

标签: angularlaravel

解决方案


在我看来,变量page是您想要从服务器端获得的页数。它不是type/interface

所以你不能用你的请求的返回类型来写它。您必须将它作为永久链接或查询方法与您的服务器一起传递。例如

getSmsmos (page): Observable<Smsmo[]> {
return this.http.get<Smsmo[]>(this.smsmoUrl + '/' + page)
.pipe(
  catchError(this.handleError('getSmsmos', []))
);
}

推荐阅读