ngFor循環無法正常工作

Question

我正在嘗試使用Yahoo Finance查找名稱和股票的價格。 嘗試使用ngFor循環遍歷結果。我無法在HTML文件中顯示結果。結果已成功顯示在控制檯上。我假設該服務文件工作正常。

Github上：https://github.com/Manasipotade/stock-app 文件用於顯示結果

的.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

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

既然你想顯示使用循環名稱和價格，我認爲你的服務響應應是對象的數組，其中每個對象表示股票和有名稱和價格作爲它的鍵。如果是這種情況，你的代碼是不正確的。它應該是：

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

Answer 2

因爲JS是異步你不能要求和HTML DOM指定HTTP響應值，因爲HTML將不會持有渲染，直到接收到響應。 我建議你可以從主要組件調用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)); 
    }); 
    } 
}