Я пытаюсь понять, почему при возврате Observable вместо массива я получаю объект

Question

Я пытаюсь построить наблюдаемую службу данных в Angular2 после https://coryrylan.com/blog/angular-observable-data-services. Однако, переменная, которую я пытаюсь перебирать в моей * ngFor, а не массив, это объект, который выглядит следующим образом:

{ _isScalar: false, source: Object } 

Мой код выглядит следующим образом:

transaction.component .ts:

import { Component, OnInit } from '@angular/core'; 
import { Router } from '@angular/router'; 
import { TransactionService } from '../transaction/transaction.service'; 
import { Transaction } from '../transaction/transaction'; 
import { Observable } from 'rxjs/Observable'; 

@Component({ 
    selector: 'transactions', 
    templateUrl: 'app/transaction/transaction.component.html', 
    providers: [TransactionService] 
}) 

export class TransactionComponent implements OnInit { 
    private transactions: Observable<Transaction[]>; 
    constructor(private transactionService: TransactionService, 
       private router: Router) {} 

    ngOnInit(): void { 
    this.transactions = this.transactionService.transactions; 
    let current = new Date(); 
    let month: string = (current.getMonth()).toString(); 
    this.transactionService.retrieveTransactions(month); 
    } 
} 

transaction.component.html:

<h2>Add a new transaction</h2> 
<new-transaction></new-transaction> 

<h1>My transactions</h1> 
<div *ngFor="let transaction of transactions | async"> 
    {{transaction.name}} | ${{transaction.amount}} | {{transaction.kind}} 
</div> 

transaction.service.ts:

import { Injectable } from '@angular/core'; 
import { Headers, Http } from '@angular/http'; 
import { BehaviorSubject } from 'rxjs/BehaviorSubject'; 
import { Observable } from 'rxjs/Observable'; 

import 'rxjs/add/operator/map'; 

import { Transaction } from './transaction'; 

@Injectable() 
export class TransactionService { 
    transactions: Observable<Transaction[]>; 
    private _transactions: BehaviorSubject<Transaction[]>; 
    private transactionUrl: string = 'http://localhost:3000/api/transactions'; 
    private headers = new Headers({'Content-Type': 'application/json'}); 
    private sessionToken: string = JSON.parse(window.localStorage.getItem('currentUser')).session_token; 
    private dataStore: { 
    transactions: Transaction[] 
    }; 
    constructor(private http: Http) { 
    this._transactions = <BehaviorSubject<Transaction[]>>new BehaviorSubject([]); 
    this.dataStore = { transactions: [] }; 
    this.transactions = this._transactions.asObservable(); 
    } 

    retrieveTransactions(month: string): void { 
    let transactionUrlParams: string = this.transactionUrl; 
    transactionUrlParams += `?session_token=${this.sessionToken}&month=${month}`; 
    this.http.get(transactionUrlParams).map(response => response.json()) 
     .subscribe(data => { 
      for (let t in data) { 
      if (data[t]) this.dataStore.transactions = data; 
      } 
      this._transactions.next(Object.assign({}, this.dataStore).transactions); 
     }, error => this.handleError(error)); 
    } 

    create(kind: string, amount: number, name: string): Promise<Transaction> { 
    return this.http 
     .post(this.transactionUrl, JSON.stringify({ 
     "transaction": { 
      "kind": kind, 
      "amount": amount, 
      "name": name, 
      "session_token": this.sessionToken, 
      "month": new Date().getMonth() 
     } 
     }), {headers: this.headers}) 
     .toPromise() 
     .then(res => { 
     return res.json(); 
     }) 
     .catch(this.handleError); 
    } 

    private handleError(error: any): Promise<any> { 
    console.error('Error!', error); 
    return Promise.reject(error.message || error); 
    } 
} 

Answer 1

Как вы уже определили его в сервис вы смотрите на Observable (private transactions: Observable<Transaction[]>;).

Наблюдатели выглядят так, как в console.log. Если вы хотите увидеть его содержимое (ваш массив) только .subscribe() и console.log ответ в обратном вызове.