RXJS 最近有重大变化吗？

Question

我在 Angular 6 中有以下代码，之前运行良好。

 getNavigation(db): any {
    return db.list('/pages', ref => {
        let query = ref.limitToLast(100).orderByChild('sortOrder');
        return query;
    }).snapshotChanges().map(changes => {
        return changes.map(change => ({key: change.payload.key, ...change.payload.val()}));
    });
}

最近的一些库更新 (rxjs ??) 突然抛出错误？什么语法改变突然破坏了我的代码？

ERROR TypeError: db.list(...).snapshotChanges(...).map is not a function at NavigationComponent.push../src/app/navigation.component.ts.NavigationComponent.getNavigation

或者更重要的是，我该如何修复它？ :-(

Answer 1

管道地图运算符：

getNavigation(db): any {
    return db.list('/pages', ref => {
        let query = ref.limitToLast(100).orderByChild('sortOrder');
        return query;
    }).snapshotChanges().pipe(
map(changes => {
        return changes.map(change => ({key: change.payload.key, ...change.payload.val()}));
    }));
}

还要确保以正确的方式导入 map：

import {map} from 'rxjs/operators';

Answer 2

好的，终于明白了。

以下是适用于遇到类似问题的任何人的工作代码：

import { Component } from '@angular/core';
import { Observable}  from 'rxjs';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { map } from 'rxjs/operators';
import { LogoComponent } from './logo.component';

@Component({
    selector: 'app-navigation',
    templateUrl: './navigation.component.html'
})


export class NavigationComponent {
    items: Observable<any[]>;
    childItems: Observable<any[]>;

    constructor(db: AngularFireDatabase) {
        this.items = this.getNavigation(db);
        this.childItems = this.getNavigation(db);
    }

    getNavigation(db: AngularFireDatabase): any {
        return db.list('/pages', ref => {
            let query = ref.limitToLast(100).orderByChild('sortOrder');
            return query;
        }).snapshotChanges().pipe(
            map(pages => {
                return pages.map(p => ({ key: p.key, ...p.payload.val() }));
            })
        );
    }
}

为了克服打字稿错误，我不得不输入 getNavigation 的 db 参数。

然后我不得不删除这个问题的反馈和 AngularFire 的迁移文档中显示的不必要的订阅功能。虽然这在某些用例中可能是必要的，但它不是我的。

RXJS 最近有重大变化吗？

Was there a recent breaking change in RXJS?

rxjs

angularfire2

angular6

rxjs6