angular - 获取列表firebase列表
问题描述
我正在使用 Firebase 上的数据库创建 Ionic 应用程序,所以我在 Firebase 中有类似的东西,我正在使用angularfire2
它来获取数据
而且我得到没有问题,paises
但我已经尝试获取列表jugadores
但我什么也没得到。
这是我的.ts
export class HomePage {
paises: Observable<any[]>
constructor(public navCtrl: NavController, db: AngularFireDatabase) {
this.paises = db.list('paises').valueChanges();
}
}
这是我的.html
<ion-content *ngFor="let pais of paises | async">
<ion-item-group>
<ion-item-divider color="light">{{pais.nombre}}</ion-item-divider>
<ion-item>{{pais.jugadores.Nombre}}</ion-item>
</ion-item-group>
我确实得到了,pais.nombre
但是当我尝试得到时,pais.jugadores
我得到的只是空白。因此,如果有人可以帮我提供有关如何获取这些信息的信息,因为我在网上搜索过,但什么也没有。
解决方案
我想你的数据结构是这样的。
[{
"bandera": "http://someimage.her.png",
"copas": 0,
"jugadores": {
"jugardor0001": {
"Nombre": "alice",
"score": 100
},
"jugardor0002": {
"Nombre": "bob",
"scoe": 80
}
}
}, ...]
“paises”是可使用 *ngFor 迭代的集合。
<!-- paises > collection, iterable -->
<ion-content *ngFor="let pais of paises | async">
<ion-item-group>
<ion-item-divider color="light">{{pais.nombre}}</ion-item-divider>
<!-- pais.jugadores > not collection, not iterable -->
<ion-item>{{pais.jugadores.Nombre}}</ion-item>
</ion-item-group>
pais.jugadores 是不可迭代的对象。
{
"jugardor0001": {
"Nombre": "alice"
"score": 100
},
"jugardor0002": {
"Nombre": "bob"
"score": 80
}
}
我们想像这样将上面的对象更改为集合。
[{
"key": "jugardor0001",
"value": {
"Nombre": "alice",
"score": 100
}
}, {
"key": "jugardor0002",
"value": {
"Nombre": "bob",
"scoe": 80
}
}]
使用“管道”将对象数组更改为集合
//pipe.keys.ts
import { Pipe, PipeTransform } from '@angular/core';
@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;
}
}
//app.module.ts
...
import {KeysPipe} from './pipe.keys';
...
@NgModule({
imports: [
... your import
],
declarations: [
... your component
KeysPipe
],
....
你的组件会像
<ion-content *ngFor="let pais of paises | async">
<ion-item-group>
<ion-item-divider color="light">{{pais.nombre}}</ion-item-divider>
<!-- using | keys pipe to change object array to collection -->
<ion-item *ngFor="let jugador of pais.jugadores | keys">
{{ jugador.key }}: {{ jugador.value.Nombre }}
</ion-item>
</ion-item-group>
stackblitz 示例在这里。
推荐阅读
- javascript - 字符串化获取“\”的对象
- android - 像 Telegram 一样加载进度条
- spring-boot - Spring Boot 应用程序在 Kafka 消费者重新平衡时停止服务流量
- visual-studio-code - ESLint 不格式化
- python - 如何在scip中获取非零变量列表
- android - 如何将二维数组复制到 Kotlin 中的 RenderScript 分配
- kubernetes - 如何为 Kubernetes 中的特定部署禁用 istio-proxy sidecar 访问日志
- testing - Webdriver 规范中的“键输入状态”是什么意思?
- linux - 无法从 http-> https 重定向,错误::80:绑定:权限被拒绝
- flutter - 如何解决flutter中的listview问题