无法显示具有Google Firebase中提供的管理员角色授权的下拉列表

Question

我正在将Firebase与Angular 6一起使用。我正在将Google登录名用于身份验证。未显示带有用户名的我的下拉菜单。我正在尝试为管理员提供授权。我正在使用authGuard服务和Admin-auth-guard服务。输入路由地址后，我将被重定向到主页。

https://shoppingcart8893.firebaseapp.com/

     [navbar.component.html
        <ng-template #anonymousUser>
              <li *ngIf="!user" class="nav-item">
                <a class="nav-link" routerLink="/login">Login</a>
              </li>
            </ng-template>
              <li ngbDropdown *ngIf="appUser;else anonymousUser" class="nav-item dropdown ">
                <a ngbDropdownToggle class="nav-link dropdown-toggle" id="dropdown01" 
                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                {{ appUser.name }}</a>
                <div ngbDropdownMenu class="dropdown-menu " aria-labelledby="dropdown01">
                  <a class="dropdown-item" routerLink="/my/orders">My Orders</a>
                  <ng-container *ngIf="appUser.isAdmin"> 
                    <a class="dropdown-item" routerLink="/admin/orders">Manage Orders</a>
                    <a class="dropdown-item" routerLink="/admin/products">Manage Products</a>
                  </ng-container> 
                  <a class="dropdown-item" (click)="logout()">log out</a>
                </div>
              </li>

        navbar.component.ts
        appUser: AppUser;
          private subscription: Subscription;
          constructor(private auth: AuthService) {
           this.subscription = auth.appUser$.subscribe( appUser => this.appUser = appUser);
           }

          logout(){
            this.auth.logout();
          }
        ngOnDestroy(){
          this.subscription.unsubscribe();
        }

        admin-auth-guard.service.ts
         constructor(private auth: AuthService, private userService: UserService) { }

          canActivate(): Observable<boolean> {
            return this.auth.appUser$
              .pipe(map(appUser => appUser.isAdmin));
          }
        }

        user.service.ts
         constructor(private db: AngularFireDatabase) {  }
        get(uid: string): Observable<AppUser> {
          return this.db.object('/users/' + uid).valueChanges() as Observable<AppUser>;
        }

        auth.service.ts
        user$: Observable<firebase.User>;
          constructor(private userService: UserService,
            private afAuth: AngularFireAuth,
             private route: ActivatedRoute) {
            this.user$ = afAuth.authState;
           }
        get appUser$(): Observable<AppUser> {
            return this.user$
            .pipe(switchMap(user => {
             if (user) {return this.userService.get(user.uid);
            }
             return of(null);
            }));
          }

        app-user.ts
        export interface AppUser{
            name: string;
            email: string;
            isAdmin: boolean;
        }

    app.module.ts
     RouterModule.forRoot([
          {path: '', component: HomeComponent },
          {path: 'products', component: ProductsComponent },
          {path: 'shopping-cart', component: ShoppingCartComponent },
          {path: 'login', component: LoginComponent },

          {path: 'checkout', component: CheckoutComponent, canActivate: [AuthGuard] },
          {path: 'order-success', component: OrderSuccessComponent, canActivate: [AuthGuard] },
          {path: 'my/orders', component: MyOrdersComponent, canActivate: [AuthGuard]},

          {path: 'admin/products',
          component: AdminProductsComponent,canActivate:[AuthGuard, AdminAuthGuard]
          },
          {path: 'admin/orders',
           component: AdminOrdersComponent, canActivate:[AuthGuard, AdminAuthGuard]
           },
        ])][1]


I did not find any error messages in particular.


  [1]: https://i.stack.imgur.com/Dgfwl.png