在Stackblitz上用HttpClient阅读HttpClient？

Question

我有一个小小的演示和它尝试使用角HttpClient来读取app/data.json。

const post$:Observable<Post> = <Observable<Post>> http.get('./data.json');

然而，HttpClient回复说：

在解析过程中失败。

有什么想法？

Answer 1

Stackblitz目前不提供静态文件，除非它们位于assets文件夹中。

所以你有两个选择：

1)作为模块直接导入json

import data from './data.json';

console.log(data) // => {title: "Simulating HTTP Requsts", content: "This is off the hook!!"}

有关详细信息，请参阅其他答案。

2)在folder(Note__：中移动json，您必须重新加载stackblitz才能使其工作)：

http.get('/assets/data.json')

叉式斯塔克布利茨

Answer 2

目前，您无法通过HTTP直接获取JSON，但是可以导入它

data.json

它返回index.html的资源，而不是您期望的数据。

​

​

在线示例

import { of } from 'rxjs';
import data from './data.json';

export class AppComponent  {
  constructor(http:HttpClient) {

  }

  ngOnInit(){
    const post$ = of(data);
    post$.subscribe(console.log);
  }
}

Answer 3

我认为在stackblitz中阅读本地json有一些问题，它不只是返回普通的json，而是返回index.html。但是，另一种方法是模拟本地json的请求，您可以尝试：

import data from './data.json'

ngOnInit(){
  this.getDatas().subscribe(data=>{
    console.log(data)
  })
}

getDatas():Observable<any>{
  return of(data).pipe(delay(1000));
}

分叉式演示