angular - 我得到的只是键而不是 AngularFire2 : Realtime Database version 5 using Angular 6. 0 的值

Question

我只是从 AngularFire2 获取键而不是值。我也试过 Peter Pham Question但问题仍然存在。

"@angular/core": "^6.0.0",
"angularfire2": "^5.0.0-rc.11",

Firebase 数据库:

类别.服务.ts:

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

@Injectable({
  providedIn: 'root'
})
export class CategoryService {

  constructor(private db: AngularFireDatabase) { }

  getCategories(){

    return this.db.list('/categories').snapshotChanges().pipe(map(categories=>{
      return categories.map(a =>{
        const value = a.payload.val();
        const key = a.payload.key;
        return {key, ...value};
      })
    }));
  }
}

产品形式.component.ts:

import { CategoryService } from './../../category.service';
import { Component, OnInit } from '@angular/core';

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

  categories$;

  constructor(public categoryService: CategoryService) {
    this.categories$ = categoryService.getCategories();
   }



  ngOnInit() {
  }

}

产品形式.component.html:

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

我哪里出错了？谢谢

Answer 1

根据 Und3rTow 推荐现在它正在工作。我尝试了以下代码:

product-form.component.html:

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

product-form.component.ts:

import { CategoryService } from './../../category.service';
import { Component, OnInit } from '@angular/core';

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

  categories$;

  constructor(public categoryService: CategoryService) { }

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

}