Получить список списка firebase - PullRequest
Новая
       25

Получить список списка firebase

0 голосов
/ 26 апреля 2018

Я создаю приложение Ionic с базой данных на Firebase, поэтому у меня есть что-то подобное в Firebase, и я использую angularfire2 для получения данных enter image description here

и яУ меня нет проблем с получением 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, все, что я получаю, это пустое место.Так что, если кто-нибудь может помочь мне дать мне информацию о том, как получить этот тип информации, потому что у меня есть поиск в Интернете и ничего.

1 Ответ

0 голосов
/ 26 апреля 2018

Я предполагаю, что ваша структура данных выглядит следующим образом. 

[{
    "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» для изменения массива объектовв коллекцию 

//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>

Например, стек здесь .

...