Updated to AngularFire2 v5.0.

One important change is that you need to call .snapshotChanges() or .valueChanges() to get data as Observable back.

    return this.db.list<Skill>(`skills/${this.uid}`)
.snapshotChanges()

The problem is when there is no data, .snapshotChanges() never emit a value.

Luckly it is Observable, we can solve the problem by using .startWith():

  getSkills(): Observable<Skill[]> {
return this.db.list<Skill>(`skills/${this.uid}`)
.snapshotChanges()
.startWith([])
.map((actions) =>
actions.map((action) => ({$key: action.key, ...action.payload.val()}))
);
}

If there is no data coming back from firebase, we still emit a empty array. This is much friendly if you work with Ngrx. Because if you depends on .snapshotChange() to emit a value back to switch map to next action, it might just block there, and your next action will never get dispatched.

[AngularFire] Resolve snapshotChanges doesn't emit value when data is empty的更多相关文章

  1. [AngularFire] Firebase OAuth Login With Custom Firestore User Data

    import { NgModule } from '@angular/core'; import { AuthService } from './auth.service'; import { Ang ...

  2. Angular $scope和$rootScope事件机制之$emit、$broadcast和$on

    Angular按照发布/订阅模式设计了其事件系统,使用时需要“发布”事件,并在适当的位置“订阅”或“退订”事件,就像邮箱里面大量的订阅邮件一样,当我们不需要时就可以将其退订了.具体到开发中,对应着$s ...

  3. Emit学习(4) - Dapper解析之数据对象映射(一)

    感觉好久没有写博客了, 这几天有点小忙, 接下来会更忙, 索性就先写一篇吧. 后面估计会有更长的一段时间不会更新博客了. 废话不多说, 先上菜. 一.示例 1. 先建类, 类的名称与读取的表名并没有什 ...

  4. es6中promise ALL Race Resolve Reject finish的实现

    function mypromise(func){ this.statue = "pending"; this.data = null; this.resolveCallback ...

  5. AngularJS路由系列(5)-- UI-Router的路由约束、Resolve属性、路由附加数据、路由进入退出事件

    本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router约束路由参数● UI-Router的Resolve属性● UI-Router给路由附加数据● UI- ...

  6. angular之$broadcast、$emit、$on传值

    文件层级 index.html <!DOCTYPE html> <html ng-app="nickApp"> <head> <meta ...

  7. seajs源码分析

    seajs主要做了2件事 1.定义什么是模块,如何声明模块:id.deps.factory.exports ----define=function(id,deps,factory){return ex ...

  8. 自己修改的两个js文件

    sea-base.js /** * Sea.js 2.2.3 | seajs.org/LICENSE.md */ (function(global, undefined) { // Avoid con ...

  9. Dapper的完整扩展(转)

    真心想说:其实...我不想用Dapper,如果OrmLite.Net支持参数化的话,也就没Dapper的什么事情了,对于OrmLite.Net只能做后续跟踪...... 这个其实是看了Dapper作者 ...

随机推荐

  1. 20180929 北京大学 人工智能实践:Tensorflow笔记08

    https://www.bilibili.com/video/av22530538/?p=28 ———————————————————————————————————————————————————— ...

  2. sql server 2000 自动收缩数据库大小

    转载.......http://mars968.blog.163.com/blog/static/7400033200941642356258/ SQLServer2000压缩日志及数据库文件     ...

  3. placement new和delete

    注意,我们无法改变new和delete操作符. 但是我们可以重载来里面的operator new 和 operator delete 方法,这个方法是被new操作符调用的,调用之后获得地址,会继续用构 ...

  4. ios提交程序后出现的各种问题

    提交了几次都被feedback.下面均为本人碰到过得问题.希望对大家解决提交问题有帮助 Number    one:PLA 3.3.12 We found your app uses the iOS ...

  5. 线性同余同余方程组解法(excrt)

    [问题描述] 求关于 x 的同余方程组 x%a 1 =b 1  a1=b1 x%a 2 =b 2  a2=b2 x%a 3 =b 3  a3=b3 x%a 4 =b 4  a4=b4 的大于等于 0 ...

  6. Oracle 导入导出 创建用户等

    localhost:1158/emD:\app\Administrator\product\11.2.0\dbhome_1\bin\imp.exe log  path  E:\app\Administ ...

  7. sql中 where语句的用法

    //查询user_id 10到20 之间  30到40之间 //查询user_id 不在10到20之间的

  8. OPENCV(4) —— ImgProc

    2D图像滤波器基础类BaseFilter:dst(x,y) = F(src(x,y), src(x+1,y)... src(x+wdith-1,y), src(y+1,x)... src(x+widt ...

  9. SQL SERVER 新增表、新增字段、修改字段 判断表是否存在

    // 新增之前判断表是否存在 IF NOT EXISTS (SELECT NAME FROM SYSOBJECTS WHERE ID = OBJECT_ID('tb_MessageHistory')) ...

  10. 用vuex构建单页

    原文地址:点我 前言:在最近学习 Vue.js 的时候,看到国外一篇讲述了如何使用 Vue.js 和 Vuex 来构建一个简单笔记的单页应用的文章.感觉收获挺多,自己在它的例子的基础上进行了一些优化和 ...