Angular 2 - 如何使用本地 json 中的数据？答案

【问题标题】：Angular 2 - how to consume data from local json?Angular 2 - 如何使用本地 json 中的数据？
【发布时间】：2018-07-03 04:55:50
【问题描述】：

感谢每一位参与其中帮助我的人。 现在它像魅力一样工作

谢谢大家

谁能告诉我如何使用本地 JSON 数据？

我不确定配置中缺少什么（问题可能出在 HTTP 配置中）。下面是我的文件结构。

├───app
    about.component.html
about.component.ts
app.component.css
app.component.html
app.component.spec.ts
app.component.ts
app.module.ts
app.routing.ts
dataservice.ts
home.component.html
home.component.ts
dummy.json
└───environments

myService.ts

@Injectable()
export class dataService implements OnInit {
  constructor(private Http: Http) {}
  private _url: string = "assets/js/dummy.json";
  ngOnInit() {}
  gethomedata() {
    return this.Http.get(this._url).map(response => response.json());
  }
}

homeComponent.ts

@Component({
  templateUrl: './home.component.html',
})
export class home implements OnInit {
  constructor(private http: Http, private dataService: dataService) {}
  home = [];
  ngOnInit() {
    this.dataService.gethomedata().subscribe(data => {
      console.log('home', data);
      this.home.push(data);
    })
  }
}

当我运行时，它显示 404 not found 错误。能告诉我哪里做错了吗？

【问题讨论】：

尝试将 json 放入 assets 文件夹中
放置什么？在资产文件夹中
Cheg，当你编译你的 Angular 应用程序时，你有一个“dist”文件夹、你的 index.html、你的 .css、你的 .js 和一个名为 assets 的文件夹（你的文件夹“assets”的副本“在您的 scr/资产中）。使用此文件夹来放置您需要阅读的所有内容：图像、要阅读的 .json 文件等
但我没有使用任何其他基本文件夹结构
├───app ├───assets │ └───js dummy.json └───环境现在我已经按照你说的改变了。你能告诉我如何访问它吗？

标签： javascript angular typescript

【解决方案1】：

理论上，您有两种选择：

您将 json 作为资产提供并通过 HttpClient 检索它。
您将 json 放入源代码中，然后将其导入 typescript 中，并在编译时通过 webpack 将其转换为对象。

实际上，据我所知，第二点是不可行的，因为它涉及到 webpack 配置的修改，而 Angular 目前是不可能的。

【讨论】：

Noel 请检查我已附上截图的更新问题
错误显示的路径 (assets/dummy.json) 与您所说的目录 (assets/js/dummy.json) 不同
抱歉延迟回复。它现在工作正常:)