Angular http rxjs/Rx Observable订阅数据绑定不起作用

Question

我正在尝试将 PHP API 中的数据绑定到客户端（Angular 2），但是，它没有按预期工作。有什么想法吗？

这是下面的laravel API代码，

 return response()-> json('message',200);

这是 Angular 2 服务，订阅如下，

  getString(): Observable<string> {
    return this._http.get(this.api_misc_url)
        .map((response: Response) => <string>response.json())
        .catch(this.handleError);

}

这是订阅者代码，如下所示，

  public ngOnInit(): void {
    this.chartId = `mydash-chart-${MydashChartComponent.currentId++}`;

   this.laravelApiService.getString().subscribe(
            messageFromLaravelApi => this.MessageFromLaravelApi = <string>messageFromLaravelApi,
            error => this.errorMessage = <string>error);
  }

这是下面的UI绑定代码，

   <div class='panel-heading' >
    <h2>Charting </h2>


                    <td>{{ MessageFromLaravelApi }}</td>


</div>

但是，我可以看到控制台日志中显示的值。

Answer 1

使用 subscribe 或 async ，不能同时使用。 async 接受 observable 或 promise 并呈现数据。

要么这个

   this.MessageFromLaravelApi$ = this.laravelApiService.getString();

http：

<tr *ngFor="let message of MessageFromLaravelApi$ | async">
    <td>{{ message }}</td>
</tr>

或

this.laravelApiService.getString()
   .subscribe(
       messageFromLaravelApi => 
            this.MessageFromLaravelApi = messageFromLaravelApi,
       error => this.errorMessage = <any>error
    );

http

<tr *ngFor="let message of MessageFromLaravelApi">
    <td>{{ message }}</td>
</tr>

---

更新相同的代码：

服务代码

  getString(): Observable<string> {
    return this._http.get(this.api_misc_url)
        .map((response: Response) => response.json())
        .catch(err=> console.error(err));
  }

组件代码：

  public ngOnInit(): void {
    this.chartId = `mydash-chart-${MydashChartComponent.currentId++}`;

   this.laravelApiService.getString().subscribe(
            messageFromLaravelApi => 
      this.MessageFromLaravelApi = messageFromLaravelApi,
            error => this.errorMessage = error);
  }

HTML

   <div class='panel-heading' >
    <h2>Charting </h2>


                    <td>{{ MessageFromLaravelApi }}</td>


</div>