-2

我需要将后端连接到前端。我的前面是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>
4

1 回答 1

-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. 如果可能，请始终明确说明您的类型。

于 2016-05-22T17:42:42.943 回答