无效参数管道 '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