Angular - необходимые данные не отображаются на странице, но отображаются в консоли

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 = data;this.datahandlertopdestination (data)}

, а navdashboard.component.ts: 71 - это:

console.log (data.data);

Как мне это решить?

Answer 1

После моего комментария вам просто нужно удалить последнюю строку вашей функции.

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

Тогда становится

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

Answer 2

Можете ли вы добавить следующие строки перед тегом <table>, чтобы увидеть значение свойства topdestination?

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