当我尝试从Firebase检索数据时，带有* ngFor的空白页

Question

我正在练习一些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>

因此，当我在home.html中执行ngFor时，它只是不打印任何内容。 有人可以帮我吗？ 我花了3天的时间来解决这个问题 大家好！

Answer 1

尝试：

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>