ngForルーピングが動作しません

Question

Yahoo Financeを使用して、Lookup NameとStockの価格を調べようとしています。 ngForを使用して結果をループしようとしています。結果をhtmlファイルに表示できません。結果はコンソールに正常に表示されます。私はサービスファイルが正常に動作すると仮定します。

のGithub：

.TSは

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ファイル

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

0123ファイルの結果を表示するために使用される https://github.com/Manasipotade/stock-app ファイル

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

あなたがforループを使用して名前と価格を表示したいので、私はあなたのサービスの応答は、各オブジェクトは、株式を表し、そのキーとして名と価格を有することを特徴とするオブジェクトの配列でなければならないと仮定します。その場合、あなたのコードは間違っています。 JSはあなたカント要求非同期（async）ですので

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

Answer 2

とhtmlが応答を受信するまでレンダリングを保持しませんので、HTMLのDOM内のHTTP応答値を割り当てる：それはする必要があります。 メインコンポーネントからhttpリクエストを呼び出し、応答をサービス変数に保存することをお勧めします。その子コンポーネントからその特定の変数にアクセスします。 サービス変数を更新する必要がある場合は、リクエストをトリガして更新することができます。

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

とサービス

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