Пустая страница с * ngFor, когда я пытаюсь получить данные из firebase - PullRequest
Новая
       12

Пустая страница с * ngFor, когда я пытаюсь получить данные из firebase

0 голосов
/ 10 ноября 2018

Я практикую некоторые Angular / Ionic, и мне немного трудно понять, почему мой * ngFor не отображает мои данные из firebase. У меня есть offre.model.ts, который выглядит так:

offre.model.ts 

export interface Offre {

key? : string ;
titre : string ;
secteur : string ;
ville : string ;
}

offreList.service, который выглядит следующим образом: 

import { Injectable } from "@angular/core";
import { Offre } from "../../models/offre/offre.model";
import { AngularFireDatabase } from "angularfire2/database";



@Injectable()
export class OffreListeService {

private offreListeRef = this.db.list<Offre>('offre_List') ;

constructor(private db : AngularFireDatabase){ }

getOffreList(){
    return this.offreListeRef;
}

addOffre(offre : Offre){
    return this.offreListeRef.push(offre) ;
}
}

Patron.ts 

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { OffreListeService } from 
'../../services/offreListe/offreListe.service';
import { Observable } from 'rxjs';
import { Offre } from '../../models/offre/offre.model';
import 'rxjs/Rx';

@IonicPage()
@Component({
selector: 'page-patron',
templateUrl: 'patron.html',
})
export class PatronPage {

  offreList$ : Observable<Offre[]> ;

  constructor(public navCtrl: NavController, public navParams: NavParams,
                 private offrep : OffreListeService) {

  this.offreList$ = this.offrep.getOffreList()
  .snapshotChanges()
  .map(
    changes => {
      return changes.map(c => ({
        key : c.payload.key,
         ...c.payload.val(),
      }));
    });
    console.log(this.offreList$);
}

 ionViewDidLoad() {
console.log('ionViewDidLoad PatronPage');
}
}

patron.html 

   <ion-item-sliding *ngFor = "let offre of offresList$ | async">
    <ion-item  >
      titre : {{offre.titre}}  
      secteur : {{offre.secteur}} 
      ville : {{offre.key}}
    </ion-item>
   </ion-item-sliding>

enter image description here

Так что, когда я делаю это ngFor в моем home.html, он просто ничего не печатает. Может ли кто-нибудь помочь мне с этим, пожалуйста? Я потратил 3 дня, пытаясь решить эту проблему Ура ребята!

1 Ответ

0 голосов
/ 10 ноября 2018

попробуйте это:

Patron.ts 

export class PatronPage {

  offreList$ = [];

  constructor(public navCtrl: NavController, public navParams: NavParams,
                 private offrep : OffreListeService) {

  this.offrep.getOffreList()
  .snapshotChanges()
  .map(
    changes => {
      return changes.map(c => ({
        key : c.payload.key,
         ...c.payload.val(),
      }));
    })
  .subscribe(offreList => this.offreList$ = offreList);

  console.log(this.offreList$);
}

 ionViewDidLoad() {
console.log('ionViewDidLoad PatronPage');
}
}

patorn.html 

<ion-item-sliding *ngIf = "offresList$.length > 0" *ngFor = "let offre of offresList$">
    <ion-item >
        titre : {{offre.titre}}  
        secteur : {{offre.secteur}} 
        ville : {{offre.key}}
    </ion-item>
</ion-item-sliding>
...