angularfireobservable/angularfirelist ionic3 的 AngularFire 4.0 问题

Question

我目前正在关注视频教程并且一直面临以下问题：InvalidPipeArgument。请指导我，因为我是 ionic 和 angularfire 新手。

this is my HTML page
    <ion-header>
      <ion-navbar color="twitter">
        <ion-title>
        <!--<span style="background-color:red">Hello</span>World-->
        <span color="twitter">Job Categories</span>
        </ion-title>
      </ion-navbar>
    </ion-header>
    <ion-content class="card-background-page">
    <div>  
      <ion-row>
      <ion-col>
      <ion-input type="text" [(ngModel)]="newItem" placeholder="New Shopping item"></ion-input>
      </ion-col>
      <ion-col>
      <button ion-button (click)="addJob()"> Add! </button>
      </ion-col>
      </ion-row>
      <ion-list>
      <ion-item-sliding *ngFor="let item of shoppingItems | async">
      <ion-item>
      {{item.value}}
      </ion-item>
      </ion-item-sliding>
      </ion-list>
    </div>
    </ion-content>

and this is my ts page:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { JobListingPage } from '../job-listing/job-listing';
import { FirebaseServiceProvider } from './../../providers/firebase-service/firebase-service';
import { FirebaseListObservable } from 'angularfire2/database';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
    shoppingItems: FirebaseListObservable<any[]>;
    newItem = '';

  constructor(public navCtrl: NavController, public firebaseService: FirebaseServiceProvider) {
      this.shoppingItems = this.firebaseService.getJobCategories();
  }

  addJob() {
      this.firebaseService.addJob(this.newItem);
  }
}

and this is my firebase-service.ts page
import { AngularFireDatabase } from 'angularfire2/database';
import { Injectable } from '@angular/core';
//import { Http } from '@angular/http';
//import 'rxjs/add/operator/map';

/*
  Generated class for the FirebaseServiceProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class FirebaseServiceProvider {

  /*constructor(public http: Http) {
    console.log('Hello FirebaseServiceProvider Provider');
  }*/

  constructor(public afd: AngularFireDatabase) {
  }

  getJobCategories() {
      console.log("hi");
      console.log(this.afd.list('/jobs/'));
        return this.afd.list('/jobs/');   
  }

  addJob(name) {
      this.afd.list('/jobs/').push(name);
  }
}

从 .ts 代码中可以看出，getJobCategories 确实会打印出控制台，但由于类型不同/与异步不兼容而无法返回？

Answer 1

试试这个：

return this.afd.list('/jobs/').valueChanges()