角度 - 拉拉维尔 获得记录最多的前 5 个 ID

Question

我正在开发一个使用Angular-7作为前端和Laravel-5.8的客户端门户应用程序。我有一个名为"行程"的表，其中包含以下字段：id，client_id，目的地。我正在尝试获得前 5 个目的地。

仪表板控制器.php

<?php
namespace AppHttpControllers;
use IlluminateHttpRequest;
use IlluminateSupportFacadesAuth;
use IlluminateSupportFacadesDB;
use CarbonCarbon;
use AppUser;
use IlluminateSupportFacadesHash;
use IlluminateSupportFacadesValidator;
use AppTrip;
use AppClient;
class DashboardController extends Controller
{
public function getTopDestination(Request $request)
{
$user = Auth::user();
$userClientId = Auth::user()->client_id;
try{
if(Auth::user()->client_id == 'ABC')
{
$destination = Trip::withCount('trips as destination_count')
->orderBy('destination_count', 'desc')
->take(5)
->get();        
}
else 
{
$destination = Trip::withCount('trips as destination_count')
->where('client_id', $userClientId)
->orderBy('destination_count', 'desc')
->take(5)
->get();        
}
return response()->json($destination, 200);
}
catch(QueryException $e)
{
$errorCode = $e->errorInfo[1];
return response()->json($errorCode);
}
}
}

navdashboard.component.ts

import {dashboard2} from 'src/assets/dist/js/pages/dashboard2.js';
import { Component, OnInit, NgZone } from '@angular/core';
import { ApiService } from 'src/app/shared/services/api.service';
import { TokenService } from 'src/app/shared/services/token.service';
import { RolesCheckService } from 'src/app/shared/services/roles-check.service';
import { SnotifyService } from 'ng-snotify';
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';
import {NgbPaginationConfig} from '@ng-bootstrap/ng-bootstrap';
import swal from 'sweetalert2';
import { FormControl } from '@angular/forms';
declare var $;
@Component({
selector: 'app-navdashboard',
templateUrl: './navdashboard.component.html',
styleUrls: ['./navdashboard.component.scss']
})
export class NavdashboardComponent implements OnInit {
topdestination = null;
headers = {     //Token for API Authorization
'Authorization' : this.token.get(),
'X-Requested-With' : 'XMLHttpRequest'
}
constructor(
private pg: NgbPaginationConfig, 
private token: TokenService, 
private http: HttpClient, 
private router: Router,
private api: ApiService, 
private zone: NgZone,
private notify: SnotifyService
) { }
ngOnInit() {
window.dispatchEvent(new Event('load'));
window.dispatchEvent(new Event('resize'));
$(dashboard2);
document.body.className = 'skin-blue sidebar-mini';
this.notify.clear();
this.notify.info("Loading...", {timeout: 0});
this.api.get('getTopDestination', this.headers).subscribe(
data => {console.log(data), this.topdestination = data; this.datahandlertopdestination(data)}
)
}
datahandlertopdestination(data){
console.log(data.data);
this.notify.clear();
this.topdestination = data.data;
}
}

navdashboard.cmponent.html

<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-body">
<table id="example2" class="table table-bordered table-hover table-striped table-condesed">
<thead>
<tr>
<th width="5%">#</th>
<th scope="col">Destination</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let topdestinations of topdestination; let i = index">
<td>{{i + 1}}</td>
<td>{{ topdestinations.destination }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>

行程的模型类是行程。

当我加载页面时，我希望看到前五个目的地。但是我得到了这个错误：

消息："调用未定义的方法 App\Trip：：trips((">

我该如何解决？

Answer 1

当我将 api 更改为：

public function getTopDestination(Request $request)
{
$user = Auth::user();
$userClientId = Auth::user()->client_id;
try{
if(Auth::user()->client_id == 'ABC')
{
$destination = Trip::select('destination')
->selectRaw('COUNT(*) AS count')
->groupBy('destination')
->orderByDesc('count')
->limit(5)
->get();      
}
else 
{
$destination = Trip::select('destination')
->selectRaw('COUNT(*) AS count')
->where('client_id', $userClientId)
->groupBy('destination')
->orderByDesc('count')
->limit(5)
->get();       
}
return response()->json($destination, 200);
}
catch(QueryException $e)
{
$errorCode = $e->errorInfo[1];
return response()->json($errorCode);
}
}
}

非常感谢。