Angular 6 / AngularFire миграция - PullRequest
Новая
       34

Angular 6 / AngularFire миграция

0 голосов
/ 05 мая 2018

У меня есть следующий более старый код 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' at 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) at 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 ? Я немного запутался, почему?

Ответы [ 2 ]

0 голосов
/ 05 мая 2018

Асинхронный канал подписывается на Observable или Promise. В вашем случае 'items' является только ссылкой на объект AngularFireList. Вам, вероятно, нужно превратить его в Observable: 

    items: Observable<any[]>;
    constructor(db: AngularFireDatabase) {
      this.items = db.list('/pages').valueChanges();
    }
0 голосов
/ 05 мая 2018

Я бы сказал, что вы используете разные версии 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);
}

Подробнее: https://github.com/angular/angularfire2/blob/master/docs/version-5-upgrade.md

...