Argument non valide pour la pipe 'AsyncPipe'

Alors je me présente quand j'essaie de récupérer mes données à partir de 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());
  }
}

Je sais que je suis en train d'essayer de montrer mes données le mauvais sens, mais je ne sais pas comment résoudre ce problème. toute aide appréciée.

InformationsquelleAutor Petros Kyriakou | 2016-03-09
  1. 9

    La async pipe s'attend à une observables ou une promesse. http.get et map opérateur de retour observables, de sorte que vous pouvez définir l'objet retourné dans le listItems propriété de votre composant. Vous n'avez pas besoin de s'abonner dans ce cas:

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

    En outre l'objet, cet élément va "recevoir" doit être un tableau pour pouvoir l'utiliser dans un ngFor. Vous service renvoie un objet et non pas un tableau de Firebase. Si vous souhaitez effectuer une itération sur les touches de l'objet, vous avez besoin pour mettre en œuvre une coutume 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;
  }
}

    et de l'utiliser comme ceci:

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

    Voir cette question pour plus de détails:

    • Est-ce à dire alors je n'ai pas besoin d'appeler se désabonner car il est géré par le framework?
    • L'Async pipe gère automatiquement l'abonnement et le désabonnement pour vous.
    InformationsquelleAutor Thierry Templier
  2. 3

    async le tuyau avec observables et/ou des promesses. Il n'abonnement pour vous, donc vous avez juste à passer un observables, sans s'inscrire dans votre code:

      ngOnInit(): any {
    this.listItems = this._firebaseService.getResources()
  }
    • Bonjour je vous remercie pour vos commentaires, je reçois maintenant ce Cannot find a differ supporting object '[object Object]' in [listItems | async in ArcListComponent@2:10] Noter que j'ai dû changer mon listItems type d'Observable<aucun> aussi.
    • votre Observables/Promesse doit retourner un tableau, NgFor n'a pas d'itération sur les objets.
    • est-il un exemple de ce que tu veux dire? je suis nouveau sur ce genre de choses. Je veux dire, je comprends ce que vous dites ne sais pas comment le faire
    InformationsquelleAutor Sasxa