导入 json 文件导致 HttpClient 解析错误

Question

我是学习 Angular 的新手，导入外部数组的简单解决方案似乎导致了我不明白的错误。我使用过 AngularJS 并且没有任何这些问题。以下是我收到的错误

HttpErrorResponse {headers: HttpHeaders, status: 200, statusText: "OK", url: "http://localhost:4200/assets/models.json", ok: false, …}
error
:
{error: SyntaxError: Unexpected token l in JSON at position 10 at JSON.parse (<anonymous>) at XMLHtt…, text: "[↵  {↵    label: "Metal Man",↵    sample: "/assets…es",↵    textures: "6",↵    materials: "1"↵  }↵]↵"}
headers
:
HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
message
:
"Http failure during parsing for http://localhost:4200/assets/models.json"
name
:
"HttpErrorResponse"
ok
:
false
status
:
200
statusText
:
"OK"
url
:
"http://localhost:4200/assets/models.json"
__proto__
:
HttpResponseBase

在我的 ts 文件中，我从资产文件夹发出以下请求-

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { CommonModule } from '@angular/common';
import { DomSanitizer } from '@angular/platform-browser';

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

  viewMode = 'work';
  modelwork: any;


 constructor( private http: HttpClient, public sanitizer: DomSanitizer ) {
 this.sanitizer = sanitizer;
}

ngOnInit(): void {
this.http.get<any>('./assets/models.json').subscribe(
  data => {
    this.modelwork = data;
  })

$(document).ready(function() {
  $(".tag").hide();
  $(".grid-item").hover(function() {
    $(this).children(".tag").stop(true, true).slideToggle(500);
     return false;
  })
});

}
}

我非常想了解导致此问题的原因、解决方法以及是否有任何关于此问题的良好文档。我正在使用一本名为 ngBook 的书作为我的学习平台以及来自 Lynda 的视频系列。两者似乎都缺乏关于错误问题的大量信息。我已经尝试过 Git，但我所看到的解决方案对我来说不太有意义。我希望从这个错误中吸取教训，并感谢社区提供的任何指导。感谢所有提前回复的人！

Answer 1

从错误看来，您的 model.json 不是有效的 JSON。尝试在所有键周围加上双引号。

[
  {
    "label": "Metal Man",
    "sample": "/assets…es",
    "textures": "6",
    "materials": "1"
  }
]