Question

我正在从一个组件调用一个服务。该服务调用外部服务，该服务异步返回数据。我的组件需要知道何时返回数据以获取数据句柄。我想我过去曾用async / await做过类似的事情，但我似乎忘记了下面例子中的内容。知道差距在这里吗？：

my.component.ts：

constructor(private afdb: AngularFireDatabase,  private ts: TestService)
{
    this._ts = ts;
    this._afdb = afdb;
    this.loadData();
}

async loadData()
{
    this._vms = new TestService(this._afdb);        
    this.testData = await this._ts.getTestData();
}

test.service.ts：

public getTestData()
{
    this._afdb.list('TestData').snapshotChanges().map(actions => {
        return actions.map(action => ({ key: action.key, ...action.payload.val() }));
    }).subscribe(items => {
        return items;
    }); 
}

Answer 1

有三种方法可以解决这个问题。

使用ngIf
订阅服务并在数据可用后呈现组件
this.yourService.yourFunction.subscribe（值=＆GT; { this.displayValue = value; this.displayValueAvailable = true; }）

在寺庙中你可以做到

<div *ngIf="displayValueAvailable"></div>

您可以使用异步管道您可以让模板知道数据是异步的，并在使用异步管道获得数据时进行渲染。您可以在此处查看文档https://angular.io/api/common/AsyncPipe
将组件值设置为空即ie。如果它是一个数组

ar：Array = [];

并在subscribe函数中设置此数组的值。一旦值可用，角度变化检测应该照顾其余的:)希望这有帮助。

Answer 2

我认为你想要的是你在模板中使用的异步管道。如果组件类中的属性是可观察的属性，则可以使用异步管道将该属性添加到组件的模板中。

https://angular.io/api/common/AsyncPipe

如何使用await / async获取此数据？

2 个答案: