title: *NgFor does not display the data
body: <p>I'm writing my first Angular2 application.</p>
  
  <p>I have a <code>BankAccountService</code> that fetches data from my backend server and a <code>bank-account.component</code> which uses this service to simply display an unsorted list of the accountNumbers.</p>
  
  <p>Debugging through chrome devtool i was able to see that the data is fetched correctly and stored in the <code>bankAccounts</code> data member, but for some reason the <code>ul</code> shows nothing.</p>
  
  <p>BankAccountService: </p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import {client} from '../app.module';
  import gql from 'graphql-tag';
  import {ObservableQuery} from "apollo-client";
  
  @Injectable()
  export class BankAccountService{
      bankAccounts: any[] = [];
  
      constructor() {
          this.queryBankAccounts();
      }
  
      queryBankAccounts(): any{
          let queryObservable: ObservableQuery = client.watchQuery({
              query: gql`
                {
                  bankAccounts {
                    id
                    accountNumber
                    userOwners{
                      firstName
                    }
                   bankId
                    branchId
                    transactions{
                      amount
                      payerId
                      recipientId
                    }
                  }
                }
              `,
              pollInterval: 50
          });
  
          let subscription = queryObservable.subscribe({
              next: ({ data }) =&gt; {
                  this.bankAccounts = data;
              },
              error: (error) =&gt; {
                  console.log('there was an error sending the query', error);
              }
          });
      }
  
      getBankAccounts(){
          return this.bankAccounts;
      }
  }
  </code></pre>
  
  <p>bank-account.component: </p>
  
  <pre><code>import {Component} from "@angular/core";
  import {BankAccountService} from "../services/BankAccountService";
  
  @Component({
      selector: 'bank-account',
      template: `&lt;ul&gt;
                      &lt;li *ngFor="let account of bankAccounts"&gt;
                          {{account.accountNumber}}
                      &lt;/li&gt;
                 &lt;/ul&gt;`,
      providers: [BankAccountService]
  })
  export class BankAccountComponent{
      bankAccounts: any[] = [];
  
      constructor(bankAccountService: BankAccountService){
          this.bankAccounts = bankAccountService.getBankAccounts();
      }
  }
  </code></pre>
  
  <p>Would really appreciate if someone could shed some light, i can't seem to understand my mistake.</p>
  
  <p>Thanks in advance</p>