管道“异步管道”的参数无效
Invalid argument for pipe '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());
}
}
我知道我试图以错误的方式显示我的数据,但我不知道如何解决这个问题。 任何帮助表示赞赏。
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 ]
})
有关更多详细信息,请参阅此问题:
- 如何使用 *ngFor 显示 json 对象
async
管道与可观察量和/或承诺一起工作。它确实为您订阅,因此您只需传递一个可观察量而无需在代码中订阅它:
ngOnInit(): any {
this.listItems = this._firebaseService.getResources()
}
相关文章:
- 函数参数中的数据与指定变量之间的任何性能差异
- 使用Express捕获参数
- 参数变量出现ngTable指令问题
- AngularJS:我可以跳过函数参数回调吗
- 如何使用skip参数使用angular ui引导进行服务器端分页
- 要求未定义JS回调参数
- 我的jQuery插件参数没有正确启动,遇到了问题
- 如何检查管道中未定义的项目
- 获取@ResponseBody的一部分作为主干和Spring MVC控制器之间的参数
- jquery设置为使用参数运行
- Javascript”;类“;带有参数的扩展
- 为什么grunt contrib connect的中间件选项的第三个参数是未定义的
- 函数未将值作为参数传递
- 如何将参数传递到angularJs中的工厂
- 什么时候可以对条件参数使用管道运算符?-JavaScript
- 如何调用具有多个参数的 Angular 2 管道
- 如何将参数传递给管道 npm 脚本
- 管道“异步管道”的参数无效
- MongoDb聚合$match错误:"参数必须是聚合管道运算符“;
- 在Ramda管道中使用相同的第一个参数