Question

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

我在网上发现了很多例子，但没有人能为我工作......：/我花了两天的时间尝试运行并调试......

我写了这段代码：

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

验证res.json()中的.map((res:Response) => 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在空{}个对象上窒息。

Answer 2

应该可以工作:)

   @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>
`

欢呼

Answer 3

如果您的JSON数据是Comp对象的数组，则必须执行以下两个步骤：

export class Comp { id:number; name:string; cmd:string; builds:Build[];//this was your first fault }
公共补偿; //这应该是 - ＆gt;私人补偿：Comp []; 你不需要公开但它必须是一个阵列/列表

如何从外部api获取数据？

3 个答案: