Angular HTTPClient 获取测试 API

Question

我编写了一个简单的方法，从 url api 端点检索 json res 对象。我想获得该输出并将其放入一些

HTML 模板中的

对象...

这是来自 api 端点的函数，它返回我的 json： 我可以用“。”之间的日期范围参数字符串来调用它。和身份证。

exports.someFnct = function(req, res) {
    //http://localhost:6000/link/Coll/2018-06-04T13:01:02.2018-06-04T15:18:45.11
    demo_id=req.params.demo_id;
    start = req.params.start;
    end = req.params.end;

    FP.findById(demo_id)
    .then(fps => {
            startts = +new Date(start)
            endts = +new Date(end)
            TSarray = []
            for (let doc of fps["someArray"]) {
                ts = + new Date(doc["Timestamp"])
                if ((ts >= startts) && (ts <= endts)){
                    TSarray.push(doc)                                                   
                }               
            }
            res.json(TSarray);
            //return TSarray;
        }
    ).catch(e => { console.log(e); res.send(e);});
}

我运行服务器，它按预期工作，并在浏览器中返回一些文档数组。 现在，我用一个组件设置了另一个 Angular 项目，我想在其中测试一些基本的 Http.get 调用，并且我想在一些 html 模板组件中显示 json 对象/字段。

我的 Angular 组件是这样的：

export class HttptestComponent implements OnInit {

  fp: FPro[]

  constructor(private http: Http) { }

  ngOnInit() {
  }

  loadFPro() {
    return this.http.get(`http://localhost:6000/link/Coll/2018-06-01T11:00:45.2018-06-01T17:15:45.29`)
    .map(res => res.json() as FPro[])
    .subscribe(res => this.fp = res);
  }


}

interface FPro {
  Timestamp: Date, 
  name: string
}

我应该显示数据的模板是：

  <div class="row">  
  <button class="btn btn-danger float-xl-right mt-1" 
    (click) = "loadFPro()">  Call HTTPService
  </button>  
  </div>

<div *ngIf="fp">
    <h2>Retrieved Data is ready!</h2>
    <ul>
      <li *ngFor="let pro of fp">
        {{pro}}
      {{pro.Timestamp}},
      {{pro.name}}
      </li>
    </ul>
</div>

但是，当我单击按钮时，什么都没有显示，为什么？我是否必须为 res.json 使用特殊的返回值，或者 Http 客户端是否只是从链接中“获取”响应对象，不管这是什么？以及如何对其进行调整，以便我不需要一些 fp 接口来获取对象，并使其更通用，例如“any”？

Answer 1

您应该在pipe 中使用map 运算符 所以你的功能会像

  loadFPro() {
    return this.http.get(`http://localhost:6000/link/Coll/2018-06-01T11:00:45.2018-06-01T17:15:45.29`)
    .pipe(map(res => res.json() as FPro[]))
    .subscribe(res => this.fp = res);
  } 

你也不必这样做res.json()httpClient 会为你做，但你可以做的是：

  loadFPro(): FPro[] {
    return this.http.get(`http://localhost:6000/link/Coll/2018-06-01T11:00:45.2018-06-01T17:15:45.29`)
    .subscribe(res => this.fp = res);
  }