获取列表 firebase 的列表 [英] Get list of list firebase

问题描述

我正在 Firebase 上创建带有数据库的 Ionic 应用程序，所以我在 Firebase 中有类似的东西，我正在使用 angularfire2 来获取数据

I am creating Ionic app with database on Firebase,so I have something like this in Firebase, and I am using angularfire2 to get the data

而且我在获取 paises 方面没有问题，但我尝试获取 jugadores 的列表，但我什么也没得到.

and I have no problem on getting paises but I have tried getting the list of jugadores but I get nothing.

这是我的.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 时，我得到的只是空格.因此，如果有人可以帮助我提供有关如何获取此信息的信息，因为我在网上搜索过，但一无所获.

I do get the pais.nombre but when i try to get pais.jugadores all i get is blank space. So if anybody could help me giving me info on how to get this tipe of information, because I have search online and nothing.

推荐答案

我猜你的数据结构是这样的.

I presume your data structure like this.

[{
    "bandera": "http://someimage.her.png",
    "copas": 0,
    "jugadores": {
        "jugardor0001": {
            "Nombre": "alice",
            "score": 100
        },
        "jugardor0002": {
            "Nombre": "bob",
            "scoe": 80
        }
    }
}, ...]

"paises" 是可使用 *ngFor 迭代的集合.

"paises" is collection which is iterable using *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 是不可迭代的对象.

pais.jugadores is object which is not iterable.

{
    "jugardor0001": {
        "Nombre": "alice"
        "score": 100
    },
    "jugardor0002": {
        "Nombre": "bob"
        "score": 80
    }
}

我们想像这样将上面的对象改为集合.

We want to change above object to collection like this.

[{
    "key": "jugardor0001",
    "value": {
        "Nombre": "alice",
        "score": 100
    }
}, {
    "key": "jugardor0002",
    "value": {
        "Nombre": "bob",
        "scoe": 80
    }
}]

使用管道"将对象数组更改为集合

use "Pipe" to change object array to collection

//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 示例是这里.

stackblitz example is here .

这篇关于获取列表 firebase 的列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！