Неверный аргумент для трубы 'AsyncPipe'

Question

Так я получаю это когда я пытаюсь получить мои данные из firebase

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 Трубы работают с наблюдаемыми и/или обещаниями. Это делает подписку для вас, так что вы просто должны пройти наблюдаемым без подписавшись на него в коде:

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

Answer 2

async труба ожидает наблюдаемым или обещание. http.get и map оператор возвращается к наблюдаемому, поэтому вы можете установить возвращаемый объект в свойство 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