javascript - 如何从外部api获取数据？

Question

我是 Angular2 的新手。我要编写单页应用程序，并且需要能够从后端获取 json。

我在网上找到了很多示例，但没有一个适合我...:/我花了 2 天尝试运行它并调试...

我写了这段代码:

import {Component} from 'angular2/core';
import {HTTP_PROVIDERS} from 'angular2/http';
import {Http, Response} from 'angular2/http';
import {Observable} from 'rxjs/Rx';
import 'rxjs/Rx';

export class Comp {
    id:number;
    name:string;
    cmd:string;
    builds:[Build]
}

export class Build {
    id:number;
    name:string;
    status:string;
    component_id:number;
}

@Component({
    selector: 'my-app',
    template: `
      <h1>MYAPP</h1>
      <ul>
        <li *ngFor="#comp of comps">
          <b>{{ comp.name }} <=> {{ comp.cmd }}</b>
          <ul>
            <li *ngFor="#build of comp.builds">
              <b>{{ build.name }} <=> {{ build.id }}</b>
            </li>
          </ul>
        </li>
      </ul>
    `
})
export class AppComponent {

  constructor(private http: Http) {}

  public comps;

  ngOnInit() {
    this.getComps();
  }

  getComps() {
    return this.http.get('http://localhost:4000/components')
      .map((res:Response) => res.json())
      .subscribe(
        data => { this.comps = data},
        err => console.error(err),
        () => console.log(this.comps)
      );
  }
}

我想从网络获取 Comp 模型并使用 @template 显示它。我尝试在 Google Chrome 控制台中调试它，但 this.comps 变量未定义。应用程序从后端获取 json，但我不知道为什么可以使用它并存储在变量中。我想我的代码中有一个小错误，但我不知道在哪里。 :(

有人可以帮我吗？

Answer 1

验证 .map((res:Response) => res.json()) 中的 res.json() 是否包含您认为包含的数据。

我建议创建一个辅助方法并设置断点，如下所示:

getComps() {
    return this.http.get('http://localhost:4000/components')
      .map(this.extractData)
      .subscribe(
        data => { this.comps = data},
        err => console.error(err),
        () => console.log(this.comps)
      );
  }

private extractData(res: Response) {
    if (res.status < 200 || res.status >= 300) {
        throw new Error('Bad response status: ' + res.status);
    }

    //set breakpoint here and value of body.
    let body = res.json();

    //some web servers package the API call return value in a .data object.
    //others do not. So, we check to check...
    if (body) {
        if (body.data) {
            return body.data;
        }
        else {
            return body;
        }
    }
    else {
        return [];
    }

}

我遇到了同样的问题，结果发现 IIS Express没有将返回值打包在 .data 对象中，并且没有 if( body){...} 检查上面的代码，ngFor 被一个空的 {} 对象阻塞。