角度http rxjs/Rx可观测订阅数据绑定不工作

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

这是下面的laravel API代码

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

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


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


</div>

这是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);
  }

getString（）：可观察{
返回此。http.get（this.api\u misc\u url）
.map（（response:response）=>response.json（））
.接住（这个.把手错误）；

}

这是订户代码，如下所示

  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);
  }

public ngOnInit（）：void{
this.chartId=`MyDashChart-${MydashChartComponent.currentId++}`；
这个.laravelApiService.getString（）.subscribe(
messageFromLaravelApi=>this.messageFromLaravelApi=messageFromLaravelApi，
error=>this.errorMessage=error）；
}

这是下面的UI绑定代码

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

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


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


</div>

制图
{{MessageFromLaravelApi}}

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

---

使用

订阅

或

异步

，而不是两者都使用

async

接受可观察或承诺并呈现数据

这两种方法中的任何一种

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

http:

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

HTML

制图
{{MessageFromLaravelApi}}

我尝试了第二种选择，但仍然没有成功。此外，我还更新了上面的API代码。我已经删除了async，但只删除了subscribe@Skeptory您得到的响应为

{message:'Testing'，message2:'Testing 2'}

，它不是数组。在HTML中删除其他内容，然后尝试

{{MessageFromLarabelApi}}

我之前尝试过几次，但都没有成功，我只是再次尝试，运气不好：（！@Skeptor.

console.log

在订阅中查看您获得的数据。删除

String[]

在服务中，由于数据不是字符串数组，因此服务函数的返回类型仍然错误，该函数使用from{message:string，message2:string}返回对象的可观察值，而不是字符串

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


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


</div>