错误类型错误：您在需要流的地方提供了“空”。 你可以提供一个 Observable、Promise、Array 或 Iterable

Question

我到处寻找答案，但我无法解决这个问题。 我发现很多人在使用 Angular 中的 Observables 时遇到了这个问题，但通常这只是一个语法错误。 我尝试了很多东西（我将在下面列出它们）但我很困惑。 我不知道为什么它会这样。

错误：

错误类型错误：您在需要流的地方提供了“空”。 您可以提供 Observable、Promise、Array 或 Iterable。

这不是功能错误。 事实上，它完全符合我的期望，但它会向控制台抛出一个错误。

期待：
它只是一个管理菜单内容视图的 ngIf 指令。 如果用户已登录，它应该查看某些菜单项（例如“我的个人资料”等...），否则，它应该只看到“登录”和“注册”按钮。 它实际上适用于这种系统，但我收到一个控制台错误。

我试过的：
谷歌搜索我尝试了很多东西。 下面列出的只是其中的一小部分，但在某些时候，我只是在尝试而不知道如何真正解决问题。

在第一次尝试中（我不会在这里列出，因为它很长），我尝试 switchMap angular fire auth state 以获取记录状态，然后我将 this.appUser$ 设置为 this.userService.get(user.uid )，从数据库返回用户数据。 这将是最终结果，但在得到错误后，我简化了很多代码以找出可能存在的问题，希望它更容易。 事实上，我在 3 天的尝试中没有解决任何问题。

1. 导航栏.component.html

<mat-menu #userMenu="matMenu">
  <ng-template matMenuContent >
    <div class="menuContent" *ngIf="(appUser$ | async) as user; else notLoggedMenuitems">
      <div mat-menu-item>
        <div class="row no-gutters ml-2 mr-2">
          <div class="col-auto"><img [src]="user.photoURL" class="user-profile-img" alt="Profile image"></div>
          <div class="col"><p class="mat-body-strong mb-0 ml-3" style="line-height: 350%;"><b>{{ user.displayName }}</b></p></div>
        </div>
      </div>
      <mat-divider class="mt-2"></mat-divider>
      <div mat-menu-item>...</div>
      <div mat-menu-item>...</div>
      <mat-divider></mat-divider>
      <div mat-menu-item (click)="logout()">Logout</div>
    </div>

    <ng-template #notLoggedMenuitems>
      <div mat-menu-item routerLink="/auth/login">Login</div>
      <div mat-menu-item routerLink="/auth/signup">Signup</div>
    </ng-template>
  </ng-template>
</mat-menu>

1. 导航栏.component.ts

export class NavbarComponent implements OnInit {

  appUser$: Observable<firebase.User>;

  constructor(private auth: AngularFireAuth) {
    this.appUser$ = this.auth.user;
  }

  ngOnInit(): any {
  }

  logout(): void {
    this.auth.signOut();
  }

}

2. 导航栏.component.html
   我将 ngIf 指令更改为下面的指令，删除 else 块。 我什至尝试使用“！”等其他运算符，但没有任何改变......

*ngIf="(appUser$ | async)"

2. 导航栏.component.ts

export class NavbarComponent implements OnInit {

  appUser$: Observable<firebase.User> = this.auth.user;

  constructor(private auth: AngularFireAuth) {}

  ngOnInit(): any {
  }

  logout(): void {
    this.auth.signOut();
  }

}

结论：
我怎样才能做到这一点？ 我不知道为什么打字稿会抛出这个错误。

更新1：
更新了 navbar.component.html

<mat-menu #userMenu="matMenu">
  <ng-template matMenuContent >
    <div class="menuContent" *ngIf="(appUser$ | async) as user; else notLoggedMenuitems">
      <div mat-menu-item>
        <div class="row no-gutters ml-2 mr-2">
          <div class="col-auto"><img [src]="user.details.imgUrl" class="user-profile-img" alt="Profile image"></div>
          <div class="col"><p class="mat-body-strong mb-0 ml-3" style="line-height: 350%;"><b>{{ user.name }}</b></p></div>
        </div>
      </div>
      <mat-divider class="mt-2"></mat-divider>
      <ng-container *ngIf="user.roles.admin">
        <div mat-menu-item><mat-icon>local_bar</mat-icon>Manage Drinks</div>
          <div mat-menu-item><mat-icon>note_add</mat-icon>Add Drinks</div>
          <mat-divider></mat-divider>
      </ng-container>
      <div mat-menu-item><mat-icon>settings</mat-icon>My Profile</div>
      <div mat-menu-item><mat-icon>wine_bar</mat-icon>My Drinks</div>
      <div mat-menu-item><mat-icon>favorite</mat-icon>Wishlist</div>
      <mat-divider></mat-divider>
      <div mat-menu-item (click)="logout()">Logout</div>
    </div>

    <ng-template #notLoggedMenuitems>
      <div mat-menu-item routerLink="/auth/login">Login</div>
      <div mat-menu-item routerLink="/auth/signup">Signup</div>
    </ng-template>
  </ng-template>
</mat-menu>

更新了 navbar.component.ts

import { Component, OnInit } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { Observable } from 'rxjs';

import { AuthenticationService } from './../../../auth/authentication/authentication.service';
import { User } from './../../../auth/authentication/models/user.model';



@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit {

  appUser$: Observable<User>;

  constructor(private authService: AuthenticationService, private auth: AngularFireAuth) {
  }

  ngOnInit(): any {
    this.appUser$ = this.authService.user$;
    this.appUser$.subscribe(res => console.log('in app user: ', res));
  }

  logout(): void {
    this.auth.signOut();
  }

}

更新了 authentication.service.ts

private initUser(): void {
  this.user$ = this.afAuth.authState.pipe(
    switchMap(user => {
      if (user) {
        return this.db.doc$<User>(`users/${user.uid}`);
      } else {
        return undefined;
      }
    })
  );
}

更新 2：
更新了 authentication.service.ts

private initUser(): void {
  this.user$ = this.afAuth.authState.pipe(
    switchMap(user => {
      if (user) {
        return this.db.doc$<User>(`users/${user.uid}`);
      } else {
        return new Observable<User>();
      }
    })
  );
}

现在我看不到错误了。 但是用户图像不能很好地显示......我不知道这是否是一种做事的好方法。

Answer 1

我想你几乎明白了。
不正确的是您在服务中处理 user$ 的方式。 您应该始终在 switchMap 运算符中返回一个 observable。
要处理没有用户登录的情况，您可以使用of() 。 它是一个 observable，它发出传入 param 的值并在此之后完成。
关于您使用的数据库，您使用的是 firestore 还是实时数据库？ 要请求您的数据，在这两种情况下，您都需要使用 valueChanges 结束您的调用以返回一个 observable。
我假设您正在使用 firestore，因为您调用了 doc 方法：

private initUser(): void {
  this.user$ = this.afAuth.authState.pipe(
    switchMap(user => {
      if (user) {
        // return an observable<User>
        return this.db.doc<User>(`users/${user.uid}`).valueChanges();
      } else {
        return of(null);
      }
    })
  );
}

试试这个，它应该可以工作。