Question

我正在做一个以Angular 7为前端，Laravel 5.8为后端的项目。最初，我使用客户端分页，但工作正常，但如果数据量很大，速度会很慢。

我改变了

public function indexSmsmo()
{       
     $smsmos = Smsmo::all();
     return $smsmos;        
}

到

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 7服务和下面的组件中

现在我有了这个Angular前端

smsmo.service.ts

  import { Smsmo } from '../models/smsmo';

  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 (): Observable<Smsmo[]> {
return this.http.get<Smsmo[]>(this.smsmoUrl + '/indexSmsmo')
.pipe(
  tap(smsmos => console.log('Fetch smsmos')),
  catchError(this.handleError('getSmsmts', []))
);
}

sms-inbox.component.ts

 import { SmsmoService } from '../../../services/smsmo.service';
 import { TokenService } from '../../../services/token.service';
 import { Router } from '@angular/router';
 import { Smsmo } from '../../../models/smsmo';

 @Component({
 selector: 'app-sms-inbox',
 templateUrl: './sms-inbox.component.html',
 styleUrls: ['./sms-inbox.component.scss']
 })

  export class SmsInboxComponent implements OnInit {

 smsmos: Smsmo[];
 isLoading: Boolean = false;
 public searchText: string; 
 public filter: string; 

 constructor(
 private excelService:ExcelService,
 private smsmoService: SmsmoService,
 private spinnerService: Ng4LoadingSpinnerService,) { }

 ngOnInit() {

    // Get Bulk SMS Inbox detail
    this.getSmsmos();    
 }

 ngOnDestroy(): void {
 document.body.className = '';
 }

  refresh(): void {
  window.location.reload();
 }

//sorting
 key: string = 'msisdn';
reverse: boolean = false;
sort(key){
this.key = key;
this.reverse = !this.reverse;
}
p: number = 1;  

getSmsmos(): void {
this.isLoading = true;
this.smsmoService.getSmsmos()
  .subscribe(
    response => this.handleResponse(response),
    error => this.handleError(error));
}

请协助使我的Laravel端点中的分页适应上述Angular。

Angular-将客户端转换为服务分页

0 个答案: