带有json的Angular 5 [object Object]错误

Posted 2023-03-31

【中文标题】带有json的Angular 5 [object Object]错误

【英文标题】：Angular 5 [object Object] error with json

【发布时间】：2018-04-02 02:12:52

【问题描述】：

我正在尝试使用 Angular 5 中的 get 通过 httpclient 加载 json 数据。我正在使用服务、接口、组件和 json 文件；我已经遵循了一些教程来尝试使其正常工作，并使用jsonlint 验证了我的 json。据我所见，一切都应该正常运行，应该解析 json，一切都应该没问题，除了我每次都在控制台中得到 'error: [object 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);      
  

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

【问题讨论】：

发布您的 HTML 模板代码

在控制台的subscribe方法中打印数据会得到什么？

如果您尝试/assets/data.json（开头不带点）会怎样

@David 删除句号什么也没做。 @Akanksha 当我打印到控制台时，它显示'status: 404, statusText: "Not Found"' 我的文件夹结构是.article.ts<br> .article.service.ts ./article/article.component.ts ./assets/data.json' 不知何故我的相对路径不准确......

@Akanksha，你的建议让我得到了答案，我的 app.module.ts 文件中仍然有 in-momory-data-service 谢谢！

【参考方案1】：

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

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

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