Question

我正在使用Angular-7前端和Laravel-5.8后端的应用程序。我有一个模型类，名为Trip（表名称为trips），具有以下字段：id，client_id，destination。我正在尝试获取排名前5位的目的地（计算出最常见的价值）。

DashboardController.php

<?php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\DB;
use Carbon\Carbon;
use App\User;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Facades\Validator;
use App\Trip;
use App\Client;

class DashboardController extends Controller
{
public function getTopDestination(Request $request)
{
    $user = Auth::user();
    $userClientId = Auth::user()->client_id;
    try{

            if(Auth::user()->client_id == 'TSL')
            {
           $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);
    }
}
}

api.php

Route::group([
    'middleware' => 'auth:api'
    ], function () {
    Route::get('getTopDestination', 'DashboardController@getTopDestination');
});

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.component.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>

加载页面时，我希望看到前五个目的地。数据未显示在页面上。但它会显示在开发人员控制台上，如下所示：

在控制台上，这是navdashboard.component.ts：71

data => {console.log（data），this.topdestination =数据； this.datahandlertopdestination（data）}

navdashboard.component.ts：71是：

console.log（data.data）;

我该如何解决？

Answer 1

您可以在<table>标记之前添加以下几行以查看topdestination属性的值吗？

<pre>
  {{ topdestination | json }}
</pre>

Answer 2

在我的评论之后，您只需要删除函数的最后一行即可。

datahandlertopdestination(data){
  console.log(data.data);
  this.notify.clear();
  this.topdestination = data.data;
}

然后成为

datahandlertopdestination(data){
  console.log(data.data);
  this.notify.clear();
}

角度-所需数据未显示在页面上，而是显示在控制台中

2 个答案: