Question

我正在设置服务，我想使用带有模拟数据的json文件开始。但是我收到TypeError：当我将该服务与模拟数据一起使用时，req.url.toLowerCase不是一个函数，如何解决此错误？

服务：

import mockCompetitions from '../../mocks/competitions-mock.json';

export class CompetitionsService {

  constructor(protected http: HttpClient) { }

  getCompetitions() {
     console.log(mockCompetitions);
     return this.http.get(mockCompetitions);
  }
}

组件：

competitions: any = [];

  constructor(private competitionsService: CompetitionsService) {}

  ngOnInit(){
    this.getCompetitions();
  }

  getCompetitions(){
    this.competitionsService.getCompetitions().subscribe(data => {
      this.competitions = data;
      console.log(this.competitions);
    }, err => console.error(err), () => console.log('Finished Loading...'));
  }

我希望从json文件在页面上打印出一个名称列表。

Answer 1

如果要使用httpclient读取本地json文件，请将json文件作为name-of-the-file.json放在Assets文件夹中，并通过使用Assets文件夹作为url发出http请求。将其放在资产文件夹中很重要，以便Angular可以找到它。因此，您的代码应如下所示：

export class CompetitionsService {

  constructor(protected http: HttpClient) { }

  getCompetitions() {
     return this.http.get('./assets/name-of-the-file.json');
  }
}

因此无需导入文件。

Answer 2

您正在使用JSON文件作为http.get()的URL。如果要使用模拟数据测试服务，则建议使用一些HTTP模拟网站，例如mocky。将您的JSON文件放在此处，并使用网站在您的http.get()中为您生成的URL。除了代码中的内容外，您无需进行其他任何更改。

Answer 3

要使用json文件作为数据提供者，可以使用import和require。

import data = require('your_file.json')
console.log("data : ", JSON.stringify(data));

如何解决TypeError：req.url.toLowerCase不是函数

3 个答案: