无效参数管道'AsyncPipe“ [英] Invalid argument for pipe 'AsyncPipe'

问题描述

所以，我得到这个，当我试图从火力点让我的数据

So i get this when i try to get my data from firebase

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

ArcListComponent

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

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

我知道我想表达我的数据错误的方式，但我不知道如何解决这个问题。任何帮助AP preciated。

I know i am trying to show my data the wrong way but i do not know how to fix this. any help appreciated.

推荐答案

的异步管道预计可观察或承诺。 http.get 和地图运营商回报可观的，所以你可以返回的对象设置成您的组件时listItems 属性。你不需要在这种情况下订阅：

The async pipe expects an observable or a promise. http.get and map operator return observable, so you can set the returned object into the listItems property of your component. You don't need to subscribe in this case:

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

此外对象，该元素将接收必须是一个数组能够内的 ngFor 使用它。你的服务返回一个对象，而不是从火力地堡数组。如果你想遍历对象的键，就需要实现自定义管道：

Moreover the object, this element will "receive" must be an array to be able to use it within an ngFor. You service returns an object and not an array from Firebase. If you want to iterate over the keys of the object, you need to implement a custom pipe:

@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 ]
})

有关详细信息，请参阅此问题：

See this question for more details:

• How使用显示JSON对象* ngFor

• How to display json object using *ngFor

这篇关于无效参数管道'AsyncPipe“的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！