JSON的Angular 5 [object Object]错误 [英] Angular 5 [object Object] error with json

问题描述

我正在尝试使用Angular 5中的get通过httpclient加载json数据.我已经按照一些教程进行了尝试，并尝试使用 jsonlint 验证了我的json.从我所看到的，一切应该正常工作，应该解析json并且一切都应该没问题，除了每次我在控制台中出现 'error:[object Object]' .我已经尝试了各种方法来解决它，例如

I'm trying to load json data via httpclient using get in Angular 5. I'm using a service, interface, component and json file; I've followed a few tutorials already to try and get this to work as well as verified my json with jsonlint. From what I can see, everything should function, the json should be parsed and everything should be fine except I get 'error: [object Object]' in the console every time. I've tried various things to fix it, such as

data => this.jsonArticles = Object.values(data);
this.articles = data[0];

但是我无法将数据转换为其他任何形式.

but I can't get my data into any other form.

article.service.ts

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

@Injectable()
export class ArticleService {

  // Variables
  private _jsonUrl: string = './assets/data.json';

  // Constructors
  constructor(private http: HttpClient) { }

  // Methods
  getArticles(): Observable<Article[]> {
    return this.http.get<Article[]>(this._jsonUrl);      
  }

}

article.component.ts

import { Component, OnInit } from '@angular/core';
import { ArticleService } from '../article.service';
import { Article } from '../article';

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

  // Variables
  public jsonArticles = [];
  public errorMsg;
  // Consturctors
  constructor(private _articleService: ArticleService) { }

  // Methods
  ngOnInit(){
    this._articleService.getArticles()
      .subscribe( 
        data => this.jsonArticles = data,
        error => this.errorMsg = error);
  }
}

article.ts

export interface Article {
    id: number;
    author: string;
    title: string;
    content: string;
    tags: string[];
    categories: string[];
    publishDate: string;
    published: boolean;
}

data.json

 [
    {
        "id": 3,
        "author": "",
        "title": "Fancy Meat",
        "content": "Strip steak bresaola capicola tail cow chicken corned beef turkey.",
        "tags": ["test", "lorum"],
        "categories": ["blah"],
        "publishDate": "2018-02-12T08:15:00.000-05:00",
        "published": true
    },
]

为了简洁起见，我将json文件截断了，文件中还有更多条目使json对象成为一个数组，并且在json数组中的最后一个条目之后没有逗号.

I truncated the json file for brevity, there are more entries in the file making my json object an array and there is no comma after the last entry in the json array.

推荐答案

我收到此错误，因为我忘记了将HttpClientModule导入到app.module.ts中并声明到了imports

I got this error because I forgot to import HttpClientModule into app.module.ts and declare it into imports

...
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRouteModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这篇关于JSON的Angular 5 [object Object]错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！