HTTP：从服务器接收对象数组

Question

我需要将后端连接到前端。我的前面是Angular2+TS。

所以问题出在服务和组件上。我不知道语法。

服务：

getCases(){
  return this.http.get('some URL')
  --- what code here? ---
}

目前我的组件看起来像：

export class CaseListComponent {
    name: string;
    id: string;
    time: string;
    cases: Observable<Case[]>;

    constructor(public _service: Service, public _router: Router) { 
        this.cases = this._service.getCases()
            .map((items) => items.map((item) => new Case(this.id, this.name, this.time)));
    }
}

目前构造函数中的代码出现编译错误：

““响应”类型上不存在属性“地图”。

所以显然我还需要在服务的getCases 方法中添加一些内容。

模板：

<table>
    <tr *ngFor="let case of cases | async">
        <td>{{case.name}}</td>
    </tr>
</table>

Answer 1

你的服务，意味着this.http.get('some URL') 返回一个 Observable。您在组件中要做的就是将该 Observable 存储在一个变量中，并在您的模板中与 async 管道结合使用它。如果您使用的是最新版本的 Angular 2，您必须执行以下操作：

export class MyComponent {
  public cases: Observable<Case[]>;

  constructor (private myService: MyService) {
    this.cases = myService.getCases()
                   .map((data) => data.cases.map((item) => new Case(...)));
  }
}

请注意，data 是您来自服务器的响应。由于我仍然不知道您的回复是什么样的，所以我举了一个例子。我假设在该 JSON 对象中有一个名为 cases 的属性，然后您可以将其 map 覆盖。查看您的响应对象并使用适当的密钥访问您的数据。

还将您的服务方法更改为以下内容：

getCases(){
  return this.http.get('some URL')
    .map((res: Response) => {
      let body = res.json();
      return body.data || { };
    });
}

在您看来，您可以使用您的数据并使用ngFor 循环它，如下所示：

<li *ngFor="let case of cases | async">
  {{ case }}
</li>

这里重要的一点是async 管道。你需要这个，因为你的财产是一个流。该管道订阅 Observable 并返回它发出的最新值。

注意

将 Observable 的类型更改为特定类型。我不知道您的数据是什么样的，所以我使用了any。如果可能，请始终明确说明您的类型。