4

初めて Angular2 アプリケーションを作成しています。

BankAccountServiceバックエンド サーバーからデータをフェッチする と、このbank-account.componentサービスを使用して単に accountNumbers の並べ替えられていないリストを表示する があります。

chrome devtool を使用してデバッグすると、データが正しくフェッチされ、bankAccountsデータ メンバーに格納されていることがわかりましたが、何らかの理由でul何も表示されません。

BankAccountService:

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 }) => {
                this.bankAccounts = data;
            },
            error: (error) => {
                console.log('there was an error sending the query', error);
            }
        });
    }

    getBankAccounts(){
        return this.bankAccounts;
    }
}

bank-account.component:

import {Component} from "@angular/core";
import {BankAccountService} from "../services/BankAccountService";

@Component({
    selector: 'bank-account',
    template: `<ul>
                    <li *ngFor="let account of bankAccounts">
                        {{account.accountNumber}}
                    </li>
               </ul>`,
    providers: [BankAccountService]
})
export class BankAccountComponent{
    bankAccounts: any[] = [];

    constructor(bankAccountService: BankAccountService){
        this.bankAccounts = bankAccountService.getBankAccounts();
    }
}

誰かが光を当てることができれば本当にありがたいです、私は私の間違いを理解できないようです.

前もって感謝します

4

2 に答える 2

5

これは、非同期関数がデータを取得しているためですが、フェッチされる前に表示しようとしているため、空の配列を反復処理しています。この問題は、配列を初期化せず ( に変更)、タグを で囲むことで簡単にbankAccounts: any[] = [];解決できbankAccounts: any[];ます。そうすれば、データがフェッチされるまで配列は未定義になり、ディレクティブのおかげで配列が取り込まれた直後にループが実行されます。<ul><div *ngIf="bankAccounts"></div>bankAccounts*ngFor*ngIf

于 2016-08-30T12:31:21.393 に答える
3

コンポーネントがデータを同期的に読み取ろうとしている間、サービスは (サーバーから結果を取得するときに) bankAccounts データを非同期的に入力するため、コードは機能しません。コンポーネントがデータを読み取るとき、サービスはまだそのデータがバックエンドから到着するのを待っています。

より良い設計は、サービスのgetBankAccounts()準備ができたときにデータを発行する Observable にすることです。コンポーネントはこのサービスにサブスクライブし、データが到着したときにのみビューを初期化します。

サービス

//make this observable into a class property
queryObservable:ObservableQuery = client.watchQuery({
    ...
});

//return the observable that will emit the data
getBankAccounts():Observable<any[]>{
    return this.queryObservable;
}

成分

//don't set it to anything, so the *ngIf will work in the template 
bankAccounts: any[];

//better to do this here than in the constructor
ngOnInit(){
    this.bankAccountService.getAccounts().subscribe(
        data => this.bankAccounts = data
    )
}

テンプレート

<!-- only show the list IF the data is available -->
<ul *ngIf="bankAccounts">
    <li *ngFor="let account of bankAccounts">
        {{account.accountNumber}}
    </li>
</ul>

ここでは説明しませんが、別の方法 ( を使用したくない場合*ngIf) は、説明したとおりにサービスを終了し、コンポーネント セットbankAccounts = service.getBankAccounts()で、テンプレートでasyncパイプを使用することです。これは、Observable とObservable が発行されると、データが自動的に表示されます。

于 2016-08-30T12:50:19.420 に答える