ngFor looping isnt working

Question

I am trying to use Yahoo Finance to Lookup Name and the Price of the stock. Trying to loop through the result using ngFor. I am not able to display the result in the html file. Result is successfully displayed on the console. I assume that service file works fine.

Github: https://github.com/Manasipotade/stock-app File used for displaying the results

.ts file

import { Component, OnInit, Input } from '@angular/core';
import { StockService } from 'app/stock.service';
import {Observable, BehaviorSubject } from 'rxjs';

@Component({
 selector: 'stock-app',
 templateUrl: './stock-app.component.html',
 styleUrls: ['./stock-app.component.scss']
})
export class StockAppComponent implements OnInit {
  stocks$: Observable<any>;
    stockSymbol: string;  
    constructor(
            private _stockService: StockService
      ) { }
    ngOnInit() {
        this.stocks$ = this._stockService.stocks$;
      }
  }

html file

<div class="container-fluid">
<div class="row">
  <div class="col-4">
    <stock-input></stock-input>
  </div>
  <div class="col-8">
      <table class="table table-stripped">
          <thead>
            <tr>
              <th>Name</th>
              <th>Price</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let stock of stocks$ | async">
              <td>
                {{ stock | json }}
              </td>
            </tr>
          </tbody>
        </table>
  </div>

StockService

import { Injectable } from '@angular/core';
import { Http, Headers, Response } from '@angular/http';
import 'rxjs/add/operator/map'; 
import {Observable, BehaviorSubject } from 'rxjs';
@Injectable()
export class StockService {
  private _stocks$: BehaviorSubject<any> = new BehaviorSubject<any>([]);            

  public readonly stocks$ = this._stocks$.asObservable();
    constructor(
      private _http: Http
    ) { }

    getStock(stockSymbol:string):Observable<any []>{
    let searchQuery ='select * from yahoo.finance.quotes where symbol={$stockSymbol} ';
    const stocklookupUrl:string='http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20%3D%20%27'+stockSymbol+'%27&format=json&diagnostics=true&env=store://datatables.org/alltableswithkeys&callback=';
    let headers = new Headers();
    headers.append('Content-Type','application/json');
    return this._http.get(stocklookupUrl).map((res:Response) =>{
    this._stocks$.next([...this._stocks$.value,res.json]);
    console.log(this._stocks$.value);
    return res.json();
    })
      }

}

Answer 1

Since you want to display the name and price using for loop, I assume your service response shall be array of objects wherein each object represents a stock and has name and price as its keys. If thats the case, your code is incorrect. It should be:

      <tbody>
        <tr *ngFor="let stock of stocks$ | async">
          <td>
            {{ stock.name }}
          </td>
          <td>
            {{ stock.price }}
          </td>
        </tr>
      </tbody>

Answer 2

Since JS is async you cant request and assign http response values in HTML dom, Because html will not hold rendering until the response received. I suggest you you can call http request from main component and store response in Service Variable . and Access that particular variable from your child component. and when ever you need to update service variable you can refresh by triggering request.

import { Component, OnInit, Input } from '@angular/core';
import { StockService } from 'app/stock.service';
import {Observable, BehaviorSubject } from 'rxjs';

@Component({
   selector: 'stock-app',
   templateUrl: './stock-app.component.html',
   styleUrls: ['./stock-app.component.scss']
})
export class StockAppComponent implements OnInit {
stocks$: Observable<any>;
stockSymbol: string;  
constructor(
        private _stockService: StockService
  ) { }
ngOnInit() {
    this.stocks$ = this._stockService.stockObj; // get updated response from service object
  }
}

and service

import { Injectable } from '@angular/core';
import { Http, Headers, Response } from '@angular/http';
import 'rxjs/add/operator/map'; 
import {Observable, BehaviorSubject } from 'rxjs';
@Injectable()
export class StockService {
    stockObj : any;
    private _stocks$: BehaviorSubject<any> = new BehaviorSubject<any>([]);            

    public readonly stocks$ = this._stocks$.asObservable();
   constructor(
     private _http: Http
   ) { }

 getStock(stockSymbol:string):Observable<any []>{
 let searchQuery ='select * from yahoo.finance.quotes where symbol={$stockSymbol} ';
 const stocklookupUrl:string='http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20%3D%20%27'+stockSymbol+'%27&format=json&diagnostics=true&env=store://datatables.org/alltableswithkeys&callback=';
let headers = new Headers();
headers.append('Content-Type','application/json');
return this._http.get(stocklookupUrl).map((res:Response) =>{
    this._stocks$.next([...this._stocks$.value,res.json]);
    console.log(this._stocks$.value);
    this.stockObj = this._stocks$.value; // Assign response to variable stockObj
    return res.json();
})
  }

Answer 3

StockAppComponent

import { Component, OnInit, Input } from '@angular/core';
import { StockService } from 'app/stock.service';
import { Observable, BehaviorSubject } from 'rxjs';

@Component({
  selector: 'stock-app',
  templateUrl: './stock-app.component.html',
  styleUrls: ['./stock-app.component.scss']
})
export class StockAppComponent implements OnInit {

  stocks$: Observable<any>;
  stockSymbol: string;

  constructor(
    private _stockService: StockService
  ) { }

  ngOnInit() {

    this._stockService.getStock(this.stockSymbol).subscribe((response: any) => {

      this.stocks$ = response;
    }, (error: any) => {

      console.log(JSON.stringify(error));
    });
  }
}