angular - Angular 7 在服务中获取 Json 数组

Question

我有一个返回这个 JSON (GET@localhost:8000/:number) 的 API：

[
  {
    "trip": 5,
    "time_logged": "17/12/2018 07:23:11",
    "day_logged": 17,
    "month_logged": 12,
    "year_logged": 2018,
    "hour": 10,
    "minute": 0,
    "fixquality": 6,
    "speed": 50,
    "angle": 12,
    "lon": -121.180632,
    "lat": 37.503852,
    "altitude": 100000,
    "temp": 13
  },
  {
    "trip": 5,
    "time_logged": "17/12/2018 07:24:59",
    "day_logged": 17,
    "month_logged": 12,
    "year_logged": 2018,
    "hour": 10,
    "minute": 0,
    "fixquality": 6,
    "speed": 50,
    "angle": 12,
    "lon": -122.180632,
    "lat": 37.503852,
    "altitude": 100000,
    "temp": 13
  }
]

在我的 Angular 7 项目中，我有一个服务应该接受这个 JSON 并将其返回为Observable<HABUpdate[]>：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'
import { Observable } from 'rxjs';

export interface HABUpdate {
    trip: number;
    time_logged: string;
    day_logged: number;
    month_logged: number;
    year_logged: number;
    hour: number;
    minute: number;
    fixquality: number;
    speed: number;
    angle: number;
    lon: number;
    lat: number;
    altitude: number;
    temp: number;
}

@Injectable({
  providedIn: 'root'
})
export class HabdataService {

  url: string = 'http://localhost:8000/';

  constructor(private http: HttpClient) { }

  getUpdates(trip: number): Observable<HABUpdate[]> {
    return this.http.get<HABUpdate[]>(this.url + String(trip));
  } 
}

但是，我在运行时收到此控制台错误：

ERROR Error: "[object Object]"
    resolvePromise http://localhost:4200/polyfills.js:3159:31
    resolvePromise http://localhost:4200/polyfills.js:3116:17
    scheduleResolveOrReject http://localhost:4200/polyfills.js:3218:17
    invokeTask http://localhost:4200/polyfills.js:2766:17
    onInvokeTask http://localhost:4200/vendor.js:51518:24
    invokeTask http://localhost:4200/polyfills.js:2765:17
    runTask http://localhost:4200/polyfills.js:2533:28
    drainMicroTaskQueue http://localhost:4200/polyfills.js:2940:25
    invokeTask http://localhost:4200/polyfills.js:2845:21
    invokeTask http://localhost:4200/polyfills.js:3885:9
    globalZoneAwareCallback http://localhost:4200/polyfills.js:3911:17
core.js:14597

我是 Angular 的新手，所以起初我认为我不能正确解析 JSON 以便将其转换为HABUpdate[]. 然而，通过互联网，我发现人们做类似事情的例子，他们的代码似乎有效。作为参考，这是试图引用此服务的组件：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { HabdataService, HABUpdate } from '../habdata.service';

@Component({
  selector: 'app-launches',
  templateUrl: './launches.component.html',
  styleUrls: ['./launches.component.scss']
})
export class LaunchesComponent implements OnInit {

  trip$: number;
  updates$: HABUpdate[];

  constructor(private route: ActivatedRoute, private data: HabdataService) { 
    this.route.params.subscribe( 
      params => this.trip$ = params.trip
    );
  }

  ngOnInit() {
    this.data.getUpdates(this.trip$).subscribe(
      data => this.updates$ = data
    );
  }

}

我确信我一定缺少一些基本的东西，但是我有一段时间没能找到解决方案。任何帮助表示赞赏。

标签： angular