無效參數管道 'AsyncPipe'

Question

所以我得到這個當我嘗試從火力

Invalid argument '{"-KCO4lKzEJPRq0QgkfHO":{"description":"teste","id":1457488598401,"resourceUrl":"tete","title":"test2"}}' for pipe 'AsyncPipe' in [listItems | async in ArcListComponent@2:10] 

ArcListComponent得到我的數據

import { Component, OnInit } from "angular2/core"; 
import { FirebaseService } from "../shared/firebase.service"; 
import { ArcItem } from "./arc-item.model"; 


@Component({ 
    selector: "arc-list", 
    template: ` 
    <ul class="arc-list"> 
     <li *ngFor="#item of listItems | async " class="arc-item"> 
     <h3>{{ item.name}}</h3><a [href]="item.resourceUrl" target="_blank" class="btn btn-success pull-right"><span>Go</span></a> 
     <hr> 
     <blockquote>{{ item.description }}</blockquote> 
     <hr> 

     </li> 
    </ul> 
    ` 

}) 

export class ArcListComponent implements OnInit { 
    listItems: string; 

    constructor(private _firebaseService: FirebaseService) {} 

    ngOnInit(): any { 
    this._firebaseService.getResources().subscribe(
     resource => this.listItems = JSON.stringify(resource), 
     error => console.log(error) 
    ); 
    } 

} 

firebase_service

import { Injectable } from "angular2/core"; 
import { Http } from "angular2/http"; 
import "rxjs/Rx"; 

@Injectable() 
export class FirebaseService { 

    constructor(private _http: Http) {} 

    setResource(id: number, title: string, description: string, resourceUrl: string) { 
    const body = JSON.stringify({ id: id, title: title, description: description, resourceUrl: resourceUrl}); 

    return this._http 
        .post("https://######.firebaseio.com/resource.json", body) 
        .map(response => response.json()); 
    } 

    getResources() { 
    return this._http 
        .get("https://######.firebaseio.com/resource.json") 
        .map(response => response.json()); 
    } 
} 

我知道我試圖以錯誤的方式顯示我的數據，但我不知道如何解決這個問題。任何幫助讚賞。

Answer 1

async管道工作與observables和/或承諾。它確實認購你，所以你只需要通過一個可觀察而不訂閱它在你的代碼：

ngOnInit(): any { 
    this.listItems = this._firebaseService.getResources() 
    } 

Answer 2

的async管道預計可觀察或承諾。 http.get和map運算符返回observable，因此您可以將返回的對象設置爲組件的listItems屬性。你不需要在這種情況下訂閱：

this.listItems = this._firebaseService.getResources(); 

而且對象，該元素將「接收」必須是一個數組，以便能夠在ngFor中使用它。您的服務會返回一個對象，而不是來自Firebase的數組。如果你想遍歷對象的鑰匙，你需要實現一個自定義的管道：

@Pipe({name: 'keys'}) 
export class KeysPipe implements PipeTransform { 
    transform(value, args:string[]) : any { 
    let keys = []; 
    for (let key in value) { 
     keys.push({key: key, value: value[key]); 
    } 
    return keys; 
    } 
} 

，並使用它像這樣：

@Component({ 
    selector: "arc-list", 
    template: ` 
    <ul class="arc-list"> 
    <li *ngFor="#item of listItems | async | keys" class="arc-item"> 
     <h3>{{ item.value.name}}</h3><a [href]="item.value.resourceUrl" target="_blank" class="btn btn-success pull-right"><span>Go</span></a> 
     <hr> 
     <blockquote>{{ item.value.description }}</blockquote> 
     <hr> 

    </li> 
    </ul> 
    `, 
    pipes: [ KeysPipe ] 
}) 

看到這個問題的更多細節：

• How to display json object using *ngFor