web-dev-qa-db-ja.com

パイプ 'AsyncPipe'の無効な引数

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

私は自分のデータを間違った方法で表示しようとしていることを知っていますが、これを修正する方法がわかりません。助けてくれてありがとう。

javascripttypescriptfirebaseangular
6
Petros Kyriakou

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

詳細については、この質問を参照してください：

10
Thierry Templier

async pipeは、オブザーバブルおよび/またはプロミスで動作します。これはサブスクリプションを行うので、コードでサブスクライブせずにオブザーバブルを渡すだけです。

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