json的Angular 5[object]错误

我正在尝试使用get-in-Angular 5通过httpclient加载json数据。我使用的是服务、接口、组件和json文件；我已经学习了一些教程，试图让它正常工作，并使用验证了我的json。从我所看到的情况来看，一切都应该正常运行，json应该被解析，一切都应该正常，除了每次控制台中都会出现'error:[object]'。我试过各种方法来修复它，比如

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

但我无法将我的数据转换成任何其他形式

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);      
  }

}

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);
  }
}

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

article.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);      
  }

}

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);
  }
}

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数组中最后一个条目后没有逗号

我出现此错误是因为我忘记将

HttpClientModule

导入

app.module.ts

并将其声明为

imports

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

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

---

发布您的HTML模板代码当您在控制台上的subscribe方法中打印数据时，您会得到什么？如果您尝试

/assets/data.json

（开头没有点）@David删除句点什么也没做@Akanksha当我打印到控制台时，它显示“status:404，statusText:“Not Found””我的文件夹结构是

.article.ts
.article.service.ts./article/article.component.ts./assets/data.json'

不知何故，我的相对路径不准确……@Akanksha，你的建议让我找到了答案，这是我在app.module.ts文件中仍然保留的momory数据服务，谢谢！