为什么我会收到此错误：类型订阅不可分配给类型 FirebaseListObservable<any>？

Question

我正在尝试从/users 列表中检索数据并收到此错误：

类型“订阅”不可分配给类型 'FirebaseListObservable'。类型中缺少属性“$ref” '订阅'。

下面是我的代码：

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

import { AngularFireAuth } from 'angularfire2/auth';
import firebase from 'firebase';
import { AngularFireDatabase, FirebaseListObservable, FirebaseObjectObservable  } from 'angularfire2/database';



@Injectable()
export class FbauthserviceProvider {

  user : FirebaseListObservable<any>;   
  email: string;

  constructor(public afAuth: AngularFireAuth, public afDb: AngularFireDatabase) {
    console.log('Hello FbauthserviceProvider Provider');
  }

  signup_with_username(email: string,password: string){
    this.email = email;

    this.user = this.afDb.list('/users', {
      query: {
        orderByChild: 'email',
        equalTo: this.email,
      },
      preserveSnapshot: true
    }).subscribe(snapshots => {
      let user_data = [];
      snapshots.forEach(snapshot => {
        user_data.push(snapshot.val());
      });
      console.log(user_data);
    });
  }
}

Answer 1

您的代码充满了反模式和不必要的部分。

首先，不要使用preserveSnapshot。您不需要使用 AngularFire。您可以直接订阅由FirebaseListObservable 发出的数组本身。一旦你有了它，就不需要遍历它并将它的元素推送到其他数组上——你已经有了数组，你可以按原样使用它，或者映射，或者存储（但见下文），或者其他什么。所以就写吧：

this.user = this.afDb.list('/users', {
  query: {
    orderByChild: 'email',
    equalTo: this.email,
  }})
}).subscribe(users => {
  console.log("users are", users);
});

但是这里还有一个问题。 this.user 不是你想的那样：它将是subscribe 返回的订阅。除了取消订阅之外，您无法对其进行任何操作。如果要“解包”用户列表并将其存储为本地静态属性，则需要将其分配到可用的 subscribe 处理程序中：

.subscribe(users => {
  console.log("users are", users);
  this.users = users;
})

然而，展开 observable 并将其存储在静态属性中（通常）是一种反模式。问题是你不知道它什么时候准备好。在最好的情况下，您必须将模板中与*ngIf="users" 一起使用的位置包装起来，或者在模板中使用存在运算符? 限定对它的引用，如users?.length（这不是AoT 友好的） )。

相反，让 observable 保持原样，并使用 async 管道直接在模板中取消引用它：

this.users$ = this.afDb.list('/users', {
  query: {
    orderByChild: 'email',
    equalTo: this.email,
  }});

<div *ngFor="let user of users$ | async">
  User is {{user.name}}
</div>

这里我遵循使用 $ 为表示可观察对象的属性添加后缀的约定，这有助于保持理智。

如果您只想要名称，那么您可以映射 observable 本身以创建名称数组的 observable：

this.names$ = this.users$.map(users => users.map(user => user.name));

请注意，这两个map 调用是不同的。第一个是将 observable 映射到一个新的 observable 中。第二个是将 observable emitted 的用户数组映射到包含名称的新数组中。现在在您的模板中：

<li *ngFor="let name of names$">{{name}}</li>

上面的讨论与组件有关。就您而言，您有一项服务。一般来说，服务订阅一些可观察对象并将值存储在静态本地属性中是一种反模式。问题是在服务上引用该属性的组件不会被更新。相反，您的服务应该公开可观察对象，并让使用者（通常是组件）取消引用/解包它们。

要找到手机号码匹配的用户，您仍然可以留在 observables 的世界中：

this.matchingUsers$ = this.users$.map(users => users.filter(user => user.mobile === mobile));

这将创建一个可观察的具有匹配手机号码的用户数组，如果没有匹配则为空。一些消费模板可以将其用作

<div *ngFor="let matchingUser of userService.matchingUsers$ | async">
  Found matching user {{user.name}}
</div>

或

<div *ngIf="userService.matchingUsers$ | async as matchingUsers">
  <div *ngIf="!matchingUsers.length">
    Sorry, no matching users.
  </div>
</div>

等等。请注意，此 as 语法需要 Angular 4。

这就是 Angular/observable/AngularFirebase 的方式。

Answer 2

subscribe 函数返回一个订阅对象。

您正在分配给FirebaseListObservable 引用。 如果您需要重用可观察对象，请在分配后订阅。

this.user = this.afDb.list('/users',{

    query: {

        orderByChild: 'email',
        equalTo: this.email,
    },
    preserveSnapshot: true
})
this.user.subscribe(snapshots =>{

        let user_data = [];
        snapshots.forEach(snapshot=>{
            user_data.push(snapshot.val());
        });