ngFor looping ne fonctionne pas

Question

J'essaie d'utiliser Yahoo Finance pour rechercher le nom et le prix de l'action. Essayer de parcourir le résultat en utilisant ngFor. Je ne suis pas en mesure d'afficher le résultat dans le fichier html. Le résultat est affiché avec succès sur la console. Je suppose que le fichier de service fonctionne bien.

Github: https://github.com/Manasipotade/stock-app fichier utilisé pour afficher les résultats

.ts déposent

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

fichier html

<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

Puisque vous souhaitez afficher le nom et le prix à l'aide de la boucle, je suppose que votre réponse de service doit être tableau d'objets dans lequel chaque objet représente un stock et a le nom et le prix que ses clés. Si c'est le cas, votre code est incorrect. Il devrait être:

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

Answer 2

Depuis JS est async vous demande dévers et affecter des valeurs de réponse HTTP dans dom HTML, parce que le HTML ne tiendra pas rendu jusqu'à ce que la réponse reçue. Je vous suggère que vous pouvez appeler la requête http du composant principal et stocker la réponse dans la variable de service. et Accédez à cette variable particulière à partir de votre composant enfant. et chaque fois que vous avez besoin de mettre à jour la variable de service, vous pouvez actualiser en déclenchant une requête.

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

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