AngularFire 4.0のanglefireobservable/anglefirelist ionic3に関する問題

Question

私は現在ビデオチュートリアルに従っており、問題に直面しています：InvalidPipeArgument。私はイオンとアングラファイアの初心者として私を案内してください。 .TSコードに見ることができるように

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); 
    } 
} 

タイプは非同期で非互換/異なっているとして、getJobCategoriesは返すことができ、コンソールをプリントアウトしませんが？

Answer 1

はこれを試してみてください：観察可能

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