Pfthb

I'm practicing some Angular/Ionic and am having a bit of a hard time figuring out why my *ngFor does not display my data from firebase.
I have an offre.model.ts that looks like this:
offre.model.ts

export interface Offre 

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

an offreList.service that looks like this :

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>

So when I do that ngFor in my home.html, it simply prints nothing
Could you anyone help me with this, please?
I spent 3 days trying to resolve this problem
Cheers guys!
enter image description here

try this :

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>