Question

我在Angular应用中提供了服务，在其中我从构造函数内部的Firebase中检索数据，并将其分配给变量。

  // AuthService

  public user;

  constructor(
    private fireStore: AngularFirestore,
    public fireAuth: AngularFireAuth,
  ) {
    this.fireAuth.authState.subscribe(user => {
      this.user = user;
    })
  }

然后在组件模板中使用它：

// Component html

<div>{{authService.user?.firstName}}</div>

它可以工作，但是当页面加载的div为空时，仅在1秒钟后接收数据。

如何解决此问题并使数据立即发送？

Answer 1

我建议使用解析器 Angular Resolve

您还可以如下更改代码段

// Component html

    <div *ngIf="authService.user;then data_content else loading_content"></div>
    <ng-template #data_content>
      <div>{{authService.user.firstName}}</div>
    </ng-template>
    <ng-template #loading_content>
      <div>Loading ...</div>
    </ng-template>

角度：等待服务中的数据

1 个答案: