为什么我的异步管道没有显示可观察的，而 console.log 正在工作？

Question

我有以下代码：

    this.projects$ = new Subject();

    let observableProjects: ProjectList = [];
    this.userObject$.subscribe( async (user) => {
      observableProjects = [];
      for (let projectID of user.ownedProjects) {
        await this.firestore.collection('projects').doc(projectID).ref.get().then( async (doc) => {
          if (doc.exists) {
            let tempProject = doc.data() as Project;
            let tempDate = tempProject.startDate as unknown as { nanoseconds: number; seconds: number; };
            let tempLocation = tempProject.location as unknown as string;
            let observerProject: Project = new Project(
                projectID,
                tempProject.fullName,
                tempProject.shortName,
                tempProject.ownerID,
                tempProject.lastOwnerID,
                tempDate.seconds,
                tempProject.duration,
                tempProject.logo,
                tempProject.status,
                tempProject.categoryID,
                tempLocation,
                [],
                tempProject.timelinePosts);
            await this.firestore.collection('projects/' + projectID + '/descriptions').ref.get().then((snapshot) => {
              snapshot.forEach((doc) => {
                observerProject.description.push(doc.data() as Description);
              });
              observableProjects.push(observerProject);
            });
          }
        });
      }
      this.projects$.next(observableProjects);
    });

当我简单地订阅和 console.log 时：

    this.projects$.subscribe((list) => {
      console.log(list);
    });

然后，它将所需的列表输出到控制台。但在我的 HTML 文档中，我有以下代码：

<ng-container *ngIf="showProjects && (projects$ | async) as projectList; else loading">
    <div class="ion-margin-top ion-padding-top" id="ownedProjectsCardContainer" overflow-scroll="true">
      <ion-card *ngFor="let project of projectList" class="ion-margin-top">
        <img width="100%" [src]="project.logo" />
        <ion-card-header>
          <ion-card-subtitle>{{ project.startDateString }} - <span class="{{ project.status ? 'active' : 'inactive' }}">{{ project.status ? 'ACTIVE' : 'INACTIVE' }}</span></ion-card-subtitle>
          <ion-card-title>{{ project.fullName }}</ion-card-title>
          <ion-fab vertical="bottom" horizontal="end">
            <ion-fab-button (click)="goToEditProject(project.id)">
              <ion-icon name="pencil-outline"></ion-icon>
            </ion-fab-button>
          </ion-fab>
        </ion-card-header>
      </ion-card>

      <ng-container *ngIf="(projects$ | async)?.length == 0" [ngTemplateOutlet]="noProjects"></ng-container>
    </div>
  </ng-container>

  <ng-template #loading>
    <ion-progress-bar type="indeterminate"></ion-progress-bar>
  </ng-template>

但是，无论项目 observable 返回什么，angular 只显示加载组件。我做错了什么？

谢谢！

Answer 1

<ng-container *ngIf="(projects$ | async) as projectList; else loading">
  <ng-container *ngIf="showProjects; else loading">
  ...
  </ng-container>
</ng-container>

在使用 observable 的值时，请单独使用两个 *ngIf 条件。