Getting data from firebase are emtpy in html

I’m tryg to get data from my database firebase, but I get no data to show in list item html because I pushed UserId first in database.

items: Observable<any[]>;
itemsRef: AngularFireList<any>;

  constructor(,public fire: AngularFireAuth,public db: AngularFireDatabase) 
    {
        this.itemsRef = db.list('report/');
        // Use snapshotChanges().map() to store the key
        this.items = this.itemsRef.snapshotChanges().pipe(
          map(changes => 
            changes.map(c => ({ key: c.payload.key, ...c.payload.val() }))
          )
        );


      }

you can see here no data to show in list item

html

  <ion-list *ngFor="let item of items | async"> 
    <ion-item-sliding>
      <ion-item>
        <h2>{{item.title}}</h2>
        <p>{{item.name}}</p>
        <p>{{item.username}}</p>
        <p>{{item.dateadded}}</p>
    </ion-item>

      <ion-item-options side="right"> 
        <button ion-button color="danger" (click)="deletReport(item.key)">
          <ion-icon  ios="ios-trash" md="md-trash" item-end large></ion-icon>
        </button>
        <button ion-button color="primary" (click)="updatereport(item.key,item.name,item.title)">
          <ion-icon ios="ios-create" md="md-create"></ion-icon>
        </button>
      </ion-item-options>

    </ion-item-sliding>
  </ion-list>