angular - *NgFor 不显示数据

Question

我正在编写我的第一个 Angular2 应用程序。

我有一个 BankAccountService从我的后端服务器和 bank-account.component 获取数据它使用此服务来简单地显示一个未排序的 accountNumber 列表。

通过 chrome devtool 调试我能够看到数据被正确获取并存储在 bankAccounts 中数据成员，但由于某种原因 ul什么都不显示。

银行账户服务:

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;
    }
}

银行账户。组件:

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();
    }
}

如果有人能解释一下，我真的很感激，我似乎无法理解我的错误。

提前致谢

Answer 1

这是因为 async 函数正在获取数据，但您试图在获取数据之前显示它，因此，您正在遍历一个空数组。您可以通过不初始化数组(将 bankAccounts: any[] = []; 更改为 bankAccounts: any[]; )并围绕您的 <ul> 轻松解决此问题。带有 <div *ngIf="bankAccounts"></div> 的标签.这样，bankAccounts在获取数据和您的 *ngFor 之前，数组将是未定义的。由于 *ngIf，将在填充数组后立即执行循环指示。