Angular 6 / AngularFire 迁移答案

【问题标题】：Angular 6 / AngularFire migrationAngular 6 / AngularFire 迁移
【发布时间】：2018-05-05 02:36:49
【问题描述】：

我有以下较旧的 Angular 4 代码：

navigation.component.ts 文件：

import { Component } from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
import { LogoComponent } from './logo.component';

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

export class NavigationComponent {
    items: FirebaseListObservable<any[]>;
    constructor(db: AngularFireDatabase) {
        this.items = db.list('/pages', { 
            query: {
                orderByChild: 'sortOrder',
                limitToLast: 100
            }
        });
    }
}

navigation.component.html 文件（为简洁起见被截断）：

<nav class="nav-standard">
    <app-logo></app-logo>
    <div class="nav-dropdown">
        <ul *ngFor="let item of items | async | filter : 'parent' : '00000000-0000-0000-0000-000000000000'" class="nav-dropdown">
            <li>

            </li>
        </ul>   
    </div>
</nav>

<nav class="nav-narrow">
    <app-logo></app-logo>
    <md-menu #menu="mdMenu" class="nav-dropdown nav-narrow-dropdown">
        <ul *ngFor="let item of items | async | filter : 'parent' : '00000000-0000-0000-0000-000000000000'" class="nav-dropdown nav-narrow-dropdown">
            <li>

            </li>
        </ul>   
    </md-menu>
    <button md-icon-button [mdMenuTriggerFor]="menu" class="expand-button">
        <md-icon>more_vert</md-icon>
    </button>
</nav>

我正在尝试将其转换为 Angular 6 [并做到这一点]：

navigation.component.ts 文件：

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

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

export class NavigationComponent {
    items: AngularFireList<any[]>;
    constructor(db: AngularFireDatabase) {
        this.items = db.list('/pages');
    }
}

navigation.component.html 文件（为简洁起见被截断）：

<nav class="nav-standard">
    <app-logo></app-logo>
    <div class="nav-dropdown">
        <ul *ngFor="let item of items | async | filter : 'parent' : '00000000-0000-0000-0000-000000000000'" class="nav-dropdown">
            <li>

            </li>
        </ul>   
    </div>
</nav>

<nav class="nav-narrow">
    <app-logo></app-logo>
    <mat-menu #menu="matMenu" class="nav-dropdown nav-narrow-dropdown">
        <ul *ngFor="let item of items | async | filter : 'parent' : '00000000-0000-0000-0000-000000000000'" class="nav-dropdown nav-narrow-dropdown">
            <li>

            </li>
        </ul>   
    </mat-menu>
    <button mat-icon-button [matMenuTriggerFor]="menu" class="expand-button">
        <mat-icon>more_vert</mat-icon>
    </button>
</nav>

这是抛出一个错误：

错误错误：InvalidPipeArgument：管道“AsyncPipe”的“[object Object]” 在 invalidPipeArgumentError (common.js:4238) 在 AsyncPipe.push../node_modules/@angular/common/fesm5/common.js.AsyncPipe._selectStrategy (common.js:4845) 在 AsyncPipe.push../node_modules/@angular/common/fesm5/common.js.AsyncPipe._subscribe (common.js:4835) 在 AsyncPipe.push../node_modules/@angular/common/fesm5/common.js.AsyncPipe.transform (common.js:4817) 在 Object.eval [as updateDirectives] (NavigationComponent.html:4) 在 Object.debugUpdateDirectives [as updateDirectives] (core.js:11922) 在 checkAndUpdateView (core.js:11315) 在 callViewAction (core.js:11556) 在 execComponentViewsAction (core.js:11498) 在 checkAndUpdateView (core.js:11321)

看来切换到新的 AngularFireList 会破坏 ngFor？我有点不明白为什么？

【问题讨论】：

标签： angular angularfire2 angularfire5 angular6

【解决方案1】：

异步管道订阅 Observable 或 Promise。在您的情况下，“项目”只是对 AngularFireList 对象的引用。你可能需要把它变成一个 Observable：

    items: Observable<any[]>;
    constructor(db: AngularFireDatabase) {
      this.items = db.list('/pages').valueChanges();
    }

【讨论】：

这行得通。现在，返回项目 $key 的语法是什么？我目前有，但不知道如何做“地图”来添加项目 $key 元数据：export class NavigationComponent { items: Observable<any[]>; constructor(db: AngularFireDatabase) { this.items = db.list('/pages', ref => { let query = ref.limitToLast(100).orderByChild('sortOrder'); return query; }).valueChanges(); } }
为此后续文章打开了一个新问题：stackoverflow.com/questions/50192924/…

【解决方案2】：

我会说你正在使用不同版本的 angularfire2：

OLD 4.0
constructor(db: AngularFireDatabase) {
  db.list('items').subscribe(console.log);
}
NEW 5.0
constructor(db: AngularFireDatabase) {
  db.list('items').valueChanges().subscribe(console.log);
}

【讨论】：