javascript - 在 Stackblitz 上使用 HttpClient 读取 data.json？

Question

我有一个小演示，它尝试app/data.json使用 Angular HttpClient 进行读取。

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）将该json移动到资产文件夹中（注意：您必须重新加载stackblitz才能使其工作）：

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

分叉的 Stackblitz

Answer 2

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

数据.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));
}

分叉的DEMO