我有以下较旧的 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>
这是抛出一个错误:
ERROR 错误:InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe' at invalidPipeArgumentError (common.js:4238) at 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?我有点困惑为什么?