Question

我是角度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)
    );
}

enter image description here

我错了什么？提前谢谢。

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

}

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

2 个答案: