Angular FIrebase 5 objects keys not being displayed. So can't delete

Question

The question has been answered but I\'m looking for a, um, more straightforward one if available. It seems strange that we\'d have to implement not one but two mappings just

Answer 1

to create an interface:

export interface Client{
    key?: string;
    firstName?: string;
    lastName?: string;
    email?: string;
    phone?: string;
    balance?:number;

}

import { Injectable } from '@angular/core';
import { AngularFireDatabase, AngularFireList, AngularFireObject} from '@angular/fire/database';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';



@Injectable()
export class ClientService {
  client: AngularFireList<any>;
  clients: Observable<any[]>;

  constructor(public db: AngularFireDatabase) {
    this.client = db.list('/clients');
    this.clients = this.client.snapshotChanges().pipe(
      map(res => res.map(c => ({ key: c.payload.key, ...c.payload.val() 
    }))

   ));

  }

  getClients(){
    return this.clients;
  }


}

import { Component, OnInit } from '@angular/core';
import { ClientService } from '../../services/client.service';
import { Client} from '../../models/client'



@Component({
  selector: 'app-clients',
  templateUrl: './clients.component.html',
  styleUrls: ['./clients.component.css']
})
export class ClientsComponent implements OnInit {
  clients:Client[];

  constructor(
    public clientService:ClientService
  ) { }

  ngOnInit(){
    this.clientService.getClients().subscribe(clients=>{
      this.clients = clients;
      console.log(this.clients);
    })


  }

}

Answer 2

Updated Answer

Rxjs have changed how it pipes data. now you have to use .pipe().

this.courses$ = this.courses.snapshotChanges().pipe(
  map(changes => 
    changes.map(c => ({ key: c.payload.key, ...c.payload.val() }))
  )
);

Original Answer

.valueChanges() contain simply data, no key with it. you need to use .snapshotChanges()

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

now just use {{course.key}}

here is your corrected code

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

export class AppComponent {
  courseRef: AngularFireList<any>;
  courses$: Observable<any[]>;

  constructor(private db: AngularFireDatabase) {
    this.courseRef = db.list('/courses');
    this.courses$ = this.courseRef.snapshotChanges().map(changes => {
        return changes.map(c => ({ key: c.payload.key, ...c.payload.val() 
    }));
   });
  }
  ...
  deleteCourse(course) {
    console.log(course.key);
    this.db.object('/courses/' + course.key).remove();
  }
}