Angularjs 角2/离子2—；构建http.get间隔数据的观测值数组的正确方法

我正在研究Angular 2和Ionic 2，试图构建一系列反应性对象

我正试图找出构建离子列表组件（StocksList）的正确方法，该组件通过一个简单的服务（StocksListService）来填充自身，该服务实例化新的observable（Stock）类实例，这些实例从服务（StockService）获取数据，该服务在observable.interval上重复调用API

最终，我希望能够创建一个有状态的管道来对股票进行排序[]（我希望了解我正在做的事情的实际正确方式）

我真的不知道如何更简洁地解释我的意图，所以我希望我的代码能帮助澄清这种情况：

--

主页
^
库存列表组件<库存列表服务
^
库存组件<库存服务

--

主页-

home.html

<ion-content>
  <ion-list
    stocksListCmp ></ion-list>
</ion-content>

股票列表组件-

stocks-list.tpl.html

<ion-card
  [stockCmp]="stock"
  *ngFor="#stock of stocks; #i = index"></ion-card>

stock.service.ts

let tickers: string[] = ['AAPL', 'BTCUSD=X', '^DJI', '^GSPC', 'NFLX', 'TSLA'];

@Injectable()
export class StocksListService {

  constructor( @Inject(forwardRef(() => StockService)) private stockService: StockService) { }

  get stocks(): Observable<IStock>[] {
    return tickers
      .map((ticker) => new Stock(this.stockService.init(ticker))); // getting type error on this.stockService.init(ticker): Observable<Observable<IStock>> not assignable to StockService
  }

}

let source: Observable<number> = Observable.interval(60 * 1000).publish().refCount();

@Injectable()
export class StockService {

  constructor(private http: Http) { }

  public init(ticker: string): Observable<Observable<IStock>> {
    if (ticker) {
      let url = 'http://finance.yahoo.com/webservice/v1/symbols/' + ticker + '/quote?format=json&view=detail';
      return this.updateData(url);
    }
  }

  private loadData(url: string): Observable<IStock> {
    return this.http.get(url)
      .map((res) => this.mapData(res.json().list.resources[0].resource.fields));
  }

  private mapData(data: any): IStock {
    return {
      ticker: data.symbol,
      name: data.name,
      price: JSON.parse(data.price),
      chg_percent: JSON.parse(data.chg_percent) / 100,
      ts: data.ts
    };
  }

  public updateData(url: string): Observable<Observable<IStock>> {
    return { init: this.loadData(url), update: source.map(() => this.loadData(url)) }; // type error
  }

  private logError(error) {
    console.log(error);
  }

}

所以这实际上现在很有效，但我肯定这不是正确的方法。在第一次间隔调用之前，必须有更好的方法从loadData方法获得结果

我想了解构建离子列表、实例化新类实例和使用反应式扩展的正确方法，希望这能帮助我实现一个有状态管道来对股票列表进行排序

---

任何建议都将不胜感激！如果我遗漏了什么或需要澄清什么，请告诉我。谢谢

你能试试决策树吗？我想这可能有一些答案，当你想通过组合其他人来创建一个可观察的模型时，你可以试试下面的决策树吗？我认为这可能有一些答案，当你想通过组合其他人来创建一个可观察的模型时，你正在寻找这些答案。

let tickers: string[] = ['AAPL', 'BTCUSD=X', '^DJI', '^GSPC', 'NFLX', 'TSLA'];

@Injectable()
export class StocksListService {

  constructor( @Inject(forwardRef(() => StockService)) private stockService: StockService) { }

  get stocks(): Observable<IStock>[] {
    return tickers
      .map((ticker) => new Stock(this.stockService.init(ticker))); // getting type error on this.stockService.init(ticker): Observable<Observable<IStock>> not assignable to StockService
  }

}

<ion-card-content>
  <ion-row>
    <ion-col>{{ stock?.ticker }}</ion-col>
    <ion-col>{{ stock?.price }}</ion-col>
    <ion-col>{{ stock?.chg_percent}}</ion-col>
  </ion-row>
</ion-card-content>

@Component({
  selector: '[stockCmp]',
  inputs: ['stockCmp'],
  viewProviders: [StockService]
})

@View({
  templateUrl: 'build/components/stock/stock.tpl.html'
})

export class Stock {
  stockCmp: Stock; // not sure how to type here
  stock: IStock; // not sure how to type here

  constructor(private stockService: StockService) { }

  ngOnInit() {
    this.stockCmp['stockService']['init']
      .subscribe((data) => this.stock = data,
      null,
      () =>
        this.stockCmp['stockService']['update']
          .subscribe((service) => service
          .subscribe((data) => this.stock = data))
      );
  }

}

let source: Observable<number> = Observable.interval(60 * 1000).publish().refCount();

@Injectable()
export class StockService {

  constructor(private http: Http) { }

  public init(ticker: string): Observable<Observable<IStock>> {
    if (ticker) {
      let url = 'http://finance.yahoo.com/webservice/v1/symbols/' + ticker + '/quote?format=json&view=detail';
      return this.updateData(url);
    }
  }

  private loadData(url: string): Observable<IStock> {
    return this.http.get(url)
      .map((res) => this.mapData(res.json().list.resources[0].resource.fields));
  }

  private mapData(data: any): IStock {
    return {
      ticker: data.symbol,
      name: data.name,
      price: JSON.parse(data.price),
      chg_percent: JSON.parse(data.chg_percent) / 100,
      ts: data.ts
    };
  }

  public updateData(url: string): Observable<Observable<IStock>> {
    return { init: this.loadData(url), update: source.map(() => this.loadData(url)) }; // type error
  }

  private logError(error) {
    console.log(error);
  }

}

export interface IStock {
  ticker: string;
  name: string;
  price: number;
  chg_percent: number;
  ts: number;
}