Угловой HTTPClient получить Тест API

Question

Я написал простой метод для извлечения объекта json res из конечной точки URL url.Я хочу получить этот вывод и поместить его в некоторый

объект в шаблоне 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, и я хочу отобразить объекты / поля json в некотором компоненте HTML-шаблона.

Мой угловой компонент похож наэто:

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 для получения объекта, и чтобы он был более общим, как с «любым»?

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