Angular http rxjs/Rx Observable Subscribe data binding not working - rxjs

Question

I am trying to bind the data from PHP API to the client (Angular 2), however, it didn't work as expected. Any idea?
This is the laravel API code below,
return response()-> json('message',200);
This is the Angular 2 service and subscribe as below,
getString(): Observable<string> {
return this._http.get(this.api_misc_url)
.map((response: Response) => <string>response.json())
.catch(this.handleError);
}
This is the subscriber code as below,
public ngOnInit(): void {
this.chartId = `mydash-chart-${MydashChartComponent.currentId++}`;
this.laravelApiService.getString().subscribe(
messageFromLaravelApi => this.MessageFromLaravelApi = <string>messageFromLaravelApi,
error => this.errorMessage = <string>error);
}
This is the UI binding code below,
<div class='panel-heading' >
<h2>Charting </h2>
<td>{{ MessageFromLaravelApi }}</td>
</div>
But, I can see value shown on the console log.

Answer 1

Either use subscribe or async , not both. async takes an observable or promise and renders data .
Either this
this.MessageFromLaravelApi$ = this.laravelApiService.getString();
http :
<tr *ngFor="let message of MessageFromLaravelApi$ | async">
<td>{{ message }}</td>
</tr>
OR
this.laravelApiService.getString()
.subscribe(
messageFromLaravelApi =>
this.MessageFromLaravelApi = messageFromLaravelApi,
error => this.errorMessage = <any>error
);
http
<tr *ngFor="let message of MessageFromLaravelApi">
<td>{{ message }}</td>
</tr>
Updating the same code :
Service code
getString(): Observable<string> {
return this._http.get(this.api_misc_url)
.map((response: Response) => response.json())
.catch(err=> console.error(err));
}
Component Code :
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>