Question

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

所以问题在于服务和组件。我无法弄清楚语法。

服务：

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

目前我的Component看起来像：

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

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

1 个答案: