Display firebase data in an ionic grid

My question is this, I have this code in the file administrador.ts :

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController } from 'ionic-angular';
import { AngularFireList, AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';
import { Change } from '@firebase/database/dist/src/core/view/Change';
//import { variable } from '@angular/compiler/src/output/output_ast';

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

public prodRef: AngularFireList<any>;
public prods: Observable<any[]>;

constructor(
   public navCtrl: NavController, 
   public navParams: NavParams, 
   public alertCtrl: AlertController,
   public database: AngularFireDatabase
   ){
     this.prodRef = this.database.list('Productos');
     this.prods = this.prodRef.snapshotChanges().map(changes => {
     return changes.map(c => ({ key: c.payload.key, ...c.payload.val() }));
   });
}

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

The idea was to fill a grid with values from the database, as they explained to me I should use this code to show it on the grid

<ion-row align-items-start *ngFor="let prod of prods | async">
  <ion-col col-auto><ion-checkbox></ion-checkbox></ion-col>
  <ion-col col-auto>{{prod.nombre}}</ion-col>
</ion-row

But it does not work, I do not know what I'm doing wrong exactly, they have helped me with the code because I still learn both languages and I only doubt a bit of a part of the code because I do not know what to do, but since it has not given me problems to register things in the database I did not give much importance and I do not know if this affects

this.prods = this.prodRef.snapshotChanges().map(changes => {
     return changes.map(c => ({ key: c.payload.key, ...c.payload.val() }));

Anyone who can explain to me how all this works?