AngularFireList，属性 valueChanges() 显示错误属性 'query' is missing in type 'Observable<{}[]>答案

【问题标题】：AngularFireList, property valueChanges() show the error Property 'query' is missing in type 'Observable<{}[]>AngularFireList，属性 valueChanges() 显示错误属性 'query' is missing in type 'Observable<{}[]>
【发布时间】：2019-02-25 02:02:06
【问题描述】：

我很难找出这个错误。这是我构建 AuthGuard 服务的代码：

user.service.ts:

import { Injectable } from '@angular/core';

import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';

import {AppUser} from './models/app.user';
import * as firebase from 'firebase';

@Injectable({
  providedIn: 'root'
})
export class UserService {

  constructor(private db: AngularFireDatabase) { }

  save(user: firebase.User) {
    this.db.object('/users/' + user.uid).update({
      name: user.displayName,
      email: user.email
    });
  }

  get(uid: string): AngularFireList<AppUser> {
    return this.db.list('/users/' + uid).valueChanges();
  }
}

.valueChanges() 属性显示错误：

:>“可观察”类型中缺少属性“查询”

我在获取 uid 时也遇到了问题：

in AuthGuardService.ts:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/observable';
import 'rxjs/add/operator/switchMap';
import 'rxjs/operator/map';
import { UserService } from './user.service';
import { CanActivate } from '@angular/router';
import { AuthService } from './auth.service';



@Injectable({
  providedIn: 'root'
})
export class AdminAuthGuard implements CanActivate {

  constructor(private auth: AuthService, private userService: UserService) { }

  canActivate (): Observable<boolean> {
    return this.auth.user$
      .switchMap(user => this.userService.get(user.uid).valueChanges())
      .map (appUser => appUser.isAdmin);
  }
}

错误是：

message": "类型 'AppUser[]' 上不存在属性 'isAdmin'。"

app.user.ts：

export interface AppUser {
    name: string;
    email: string;
    isAdmin: boolean;
}

谁能帮我确定如何解决这个问题？谢谢！

【问题讨论】：

标签： angular typescript firebase angularfire

【解决方案1】：

在您的服务中，您的返回类型是错误的。您不是在返回 AngularFireList<AppUser>，而是在返回 Observable<AppUser[]>。

在守卫中，您将一组用户传递给映射，因此您必须检查第一个元素是否是管理员。

我对 firebase 不是很熟悉，但在您的情况下，db.list() 似乎是db.object() 更合适的替代方法来返回单个记录：

/* service */
get(uid: string): Observable<AppUser> {
    return this.db.object<AppUser>('/users/' + uid).valueChanges();
}

/* guard */
canActivate (): Observable<boolean> {
    return this.auth.user$
       .switchMap(user => this.userService.get(user.uid))
       .map (appUser => appUser.isAdmin);
}

【讨论】：

Daniel，我在更改代码时收到此错误：类型“Observable”不可分配给类型“Observable”。类型“{}”不可分配给类型“AppUser”。类型“{}”中缺少属性“电子邮件”。 Tks，无论如何，请为您提供帮助。
我看到有一个通用版本的对象，您可以在其中指定类型。将通用参数设置为 AppUser 应该可以解决问题。我已经相应地更新了我的答案。否则，您必须在调用后强制转换结果，使其与回调签名匹配（这是要避免的）。

【解决方案2】：

我找到了答案：

user.service.ts:

import { Injectable } from '@angular/core';

import { AngularFireDatabase, AngularFireObject } from 'angularfire2/database';

import {AppUser} from './models/app.user';
import * as firebase from 'firebase';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class UserService {


  constructor(private db: AngularFireDatabase) { }

  save(user: firebase.User) {
    this.db.object('/users/' + user.uid).update({
      name: user.displayName,
      email: user.email
    });
  }

  get(uid: string): AngularFireObject<AppUser> {
      return this.db.object('/users/' + uid);
  }

}

In admin-auth-guard.service.ts:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/observable';
import 'rxjs/add/operator/switchMap';
import 'rxjs/operator/map';
import { UserService } from './user.service';
import { CanActivate } from '@angular/router';
import { AuthService } from './auth.service';




@Injectable({
  providedIn: 'root'
})
export class AdminAuthGuard implements CanActivate {

  constructor(private auth: AuthService, private userService: UserService) { }

   canActivate(): Observable<boolean> {
      return this.auth.user$
      .switchMap(user => this.userService.get(user.uid).valueChanges())
      .map (appUser => appUser.isAdmin);
     }
}

谢谢大家！

【讨论】：