Firebase在角度2+上很好地使用了Observable(rxjs)

时间:2018-11-19 18:36:24

标签: angular firebase firebase-realtime-database rxjs observable

此刻,我正在使用Rxjs中的Subject,没有任何问题,简单的示例:

服务

 rooms: Room[] = [];
    roomsSubject = new Subject<Room[]>();

    emitRooms() {
        this.roomsSubject.next(this.rooms);
    }

    getRooms() {
        firebase.database().ref('/rooms').on('value', data => {
            this.rooms = data.val() ? Object.values(data.val()) : [];
            console.log(data.val());
            this.emitRooms();
        }, error => {
            console.log("getRooms: ", error);
        });
    }

组件:

rooms: Room[];
roomsSubscription: Subscription;
ngOnInit() {
    this.roomService.getRooms();
    this.roomsSubscription = this.roomService.roomsSubject.subscribe((rooms: Room[]) => {
        this.rooms = rooms;
    });

}

一切正常,但在这种情况下,我只需要一个Observable(我不从客户端发出数据)。所以我尝试将这段代码更新为:

getRooms() {
    return firebase.database().ref('/rooms').on('value', data => {
        return of(data.val());

    }, error => {
        console.log("getRooms: ", error);
    });
}

组件:

ngOnInit() {
    this.roomsSubscription = this.roomService.getRooms().subscribe((rooms: Room[]) => {
        this.rooms = rooms;
    });

}

订阅时出错:

  

错误TS2339:类型'(a上不存在属性'subscribe'   DataSnapshot,b ?: string)=>任意'

更新为:

getRooms(): Observable<any> {

我知道了

  

错误TS2322:类型'(a:DataSnapshot,b ?:字符串)=>任何'不是   可分配给“可观察”类型。属性“ _isScalar”为   类型'((a:DataSnapshot,b ?: string)=>任何'缺少)。

一直以来,我都遵循stackoverflows来更正错误,并一直得到新的错误。我正在开发Visual Studio Code。

有没有机会使用Angularfire的Observable吗?

1 个答案:

答案 0 :(得分:1)

出错的原因是您将返回firebase.database().ref('/rooms').on(...)返回的值,该值是类型(a: DataSnapshot, b?: string) => any的值。您要发送的是Observable

为此,在这种情况下,您可以简单地使用Observable.create。如果出现错误,可以使用throwError

...
import { Observable, throwError } from 'rxjs';
...

@Injectable()
export class RoomService {

  getRooms(): Observable<any> {
    return Observable.create(observer => {
      firebase.database().ref('/rooms').on('value', data => {
        return observer.next(data.val());
      }, error => {
        return throwError(error);
      });
    });
  }

}