Question

我正在编写我的第一个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();
    }
}

如果有人能说清楚，我真的很感激，我似乎无法理解我的错误。

提前致谢

Answer 1

那是因为异步函数正在获取数据，但是你试图在获取数据之前显示它，因此，你正在迭代一个空数组。您可以通过不初始化数组（将bankAccounts: any[] = [];更改为bankAccounts: any[];）并使用<ul>包围<div *ngIf="bankAccounts"></div>标记来轻松解决此问题。这样，bankAccounts数组将被取消定义，直到获取数据并且由于*ngFor指令填充数组后将立即执行*ngIf循环。

Answer 2

您的代码无效，因为当您的组件尝试同步读取数据时，服务会异步填充其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发出后自动显示数据。

* NgFor不显示数据

2 个答案: