*NgFor does not display the data
<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>