http get 方法显示找不到 json 文件

Question

我在angular 4中是全新的，并试图调用web api httpGet方法。我创建了一个名为 student.json 的 json 文件。当我在控制台中运行代码时，我可以看到以下错误：

 http://localhost:4200/src/data/students.json 404 (Not Found)

我的代码 ：

fetchData(){
    this.http.get("src/data/students.json").subscribe(
        (data)=>console.log(data)
    );
}

在此处输入图像描述

我错了什么？提前谢谢。

Answer 1

当您运行 ng build 时，请转到dist并注意到您的 .json 文件不存在。这就是为什么它没有被提供的原因，webpack 捆绑包没有添加该数据文件夹，因此应用程序找不到您的文件。

实现此功能的一种方法是将数据文件夹放在 assets 文件夹中： src/assets/data/students.json

然后，如果您运行 ng build ，请注意资产现在可用，您的students.json也可用。

通过这样做，ng serve将得到你想要的。请记住，.get 是相对于您的组件的。例如，如果我在src/app/app.component.ts中有该代码，我会告诉它回到一个级别到src，然后输入assets，最后读取data/students.json，有一个相对路径../assets/data/students.json

在代码中，如下所示：

export class AppComponent {
  title = 'app';
  constructor(private _http: Http) {
    this._http.get('../assets/data/students.json').subscribe(
      (data)=>console.log(data.json())
    );
  }
}

希望这有所帮助。

注意：我在这里提到ng build只是为了显示src/data不可用以及它不起作用的原因。你真的不需要ng build，ng serve就足够了。

Answer 2

在您的

服务中使用以下代码

export class MyDataService {
  constructor(private http: Http) { }
  fetchData() {
    this.http.get('../assets/data/students.json').subscribe(
      (data)=>console.log(data)
    );
  }
}