fetch data from firebase in angular 5

I am new to firebase and angular, in step trying to learn I created data in firebase and now want to get in angular 5. But it's not working.

Firebase data structure:

category.service.ts:

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class CategoryService {

  constructor(private db: AngularFireDatabase) { }

  getCategories(){
    return this.db.list('/categories').valueChanges();
  }

}

Product-form.component.ts

import { CategoryService } from './../../category.service';
import { Component, OnInit } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'app-product-form',
  templateUrl: './product-form.component.html',
  styleUrls: ['./product-form.component.css']
})
export class ProductFormComponent implements OnInit {
  categories$; // Observable

  constructor(private categoryService: CategoryService) {
  }

  ngOnInit() {
    this.categories$ = this.categoryService.getCategories();
    console.log(this.categories$);
  }

}

product-form.component.html

<select class="form-control" name="" id="category">
        <option value=""></option>
        <option  *ngFor="let c of categories$ | async" [value]="c.$key">
          {{c.name}}
        </option>
    </select>

Error in console i am getting:

Please tell me what's wrong with my code.