錯誤類型錯誤：您在需要流的地方提供了“空”。 你可以提供一個 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);
      }
    })
  );
}

試試這個，它應該可以工作。