Question

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

对象中...

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

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

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

My 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

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

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

Angular HTTPClient获取测试API

1 个答案: