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>

库存服务

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 循环显示名称和价格，我假设您的服务响应应该是对象数组，其中每个对象代表一只股票，并以名称和价格作为其键。如果是这样，您的代码不正确。应该是：

      <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 请求并将响应存储在 Service Variable 中。并从您的子组件访问该特定变量。 并且当您需要更新服务变量时，您可以通过触发请求进行刷新。

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