Angular 错误类型错误：您提供了'；空'；预计会有小溪的地方。您可以提供一个可观察的、承诺的、数组的或可观察的

我到处寻找答案，但我找不出这个问题。 我发现很多人在角度上都有这个问题，但通常这只是一个语法错误。我尝试了很多东西（我将在下面列出），但我感到困惑。我不知道为什么会这样

错误：

ERROR TypeError：您在需要流的位置提供了“null”。您可以提供一个可观察的、承诺的、数组的或可观察的

这不是功能性错误。事实上，它完全符合我的期望，但它给控制台带来了一个错误

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

我的尝试：
在谷歌上搜索，我尝试了很多东西。下面列出的只是其中的几个，但在某个时候，我只是在尝试，而不知道如何解决这个问题

在第一次尝试中（我将不在这里列出，因为它很长），我尝试切换angular fire auth状态以获取记录状态，然后将this.appUser$设置为this.userService.get（user.uid），以从数据库返回用户数据。这将是最终的结果，但在得到错误后，我对代码进行了大量简化，以找出问题所在，希望更简单。事实上，我在三天的尝试中没有解决任何问题

navbar.component.html

navbar.component.ts

导出类NavbarComponent实现OnInit{
appUser$：Observable=this.auth.user；
构造函数（私有身份验证：AngularFireAuth）{}
ngOnInit（）：任何{
}
注销（）：void{
this.auth.signOut（）；
}
}

结论：
我该怎么做？我不知道为什么typescript会抛出这个错误。

更新1:
更新的navbar.component.html

{{user.name}
本地酒吧管理饮料
注意添加饮料
设置Y剖面
酒类饮料
偏爱者
注销
登录
报名

更新的navbar.component.ts

从'@angular/core'导入{Component，OnInit}；
从'@angular/fire/auth'导入{AngularFireAuth}；
从“rxjs”导入{Observable}；
从“/../../../auth/authentication/authentication.service”导入{AuthenticationService}；
从“/../../../auth/authentication/models/User.model”导入{User}；
@组成部分({
选择器：“应用程序导航栏”，
templateUrl:'./navbar.component.html'，
样式URL:['./navbar.component.scss']
})
导出类NavbarComponent实现OnInit{
appUser$：可观察；
构造函数（私有authService:AuthenticationService，私有auth:AngularFireAuth）{
}
ngOnInit（）：任何{
this.appUser$=this.authService.user$；
this.appUser$.subscribe（res=>console.log（'in-app user:'，res））；
}
注销（）：void{
this.auth.signOut（）；
}
}

更新的authentication.service.ts

private initUser（）：void{
this.user$=this.afAuth.authState.pipe(
开关映射（用户=>{
如果（用户）{
返回这个.db.doc$（`users/${user.uid}`）；
}否则{
返回未定义；
}
})
);
}

更新2:
更新的authentication.service.ts

private initUser（）：void{
this.user$=this.afAuth.authState.pipe(
开关映射（用户=>{
如果（用户）{
返回这个.db.doc$（`users/${user.uid}`）；
}否则{
返回新的可观察（）；
}
})
);
}

---

现在我再也看不到错误了。但是用户图像显示不好。。。不过，我不知道这是否是一种好的做事方法。

我想你差不多做到了。
不正确的是您在服务中处理用户$的方式。您应该始终在switchMap操作符中返回一个可观测值。
要处理没有用户登录的情况，可以使用

of（）

。它是一个可观察的对象，它发出在param中传递的值，然后立即完成。
关于您使用的数据库，您使用的是firestore还是实时数据库？ 要请求您的数据，在这两种情况下，您都需要使用valueChanges结束通话，以返回一个可观察数据。
我知道您正在使用firestore，因为您调用了doc方法：

private initUser（）：void{
this.user$=this.afAuth.authState.pipe(
开关映射（用户=>{
如果（用户）{
//返回一个可观察的
返回这个.db.doc（`users/${user.uid}`）。valueChanges（）；
}否则{
返回（空）；
}
})
);
}

---

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

你确定错误是关于

*ngIf

的吗？你是否验证了

auth.user

正在返回一个值，并且该类型与

firebase.user

兼容？当你使用更高的观察值并结合使用诸如switchMap、mergeMap、，这些操作符期望返回一个可观察值，而您没有，因为您在代码中的某个点返回null。可能是

this.auth.user

返回空值，由于模板中的管道异步，所以会出现此错误。谢谢大家，这有点帮助。不幸的是，我试图返回各种服务，但什么也找不到。@Elmehdi不，我不认为这实际上是ngIf造成的。@它正在返回firebase.User或null@QuentinFonck this.auth它是AngularFireAuth，所以我想应该对它进行优化。这是firebase的官方图书馆。Unfo

<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>

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();
  }

}

*ngIf="(appUser$ | async)"

export class NavbarComponent implements OnInit {

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

  constructor(private auth: AngularFireAuth) {}

  ngOnInit(): any {
  }

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

}