如何从Firebase实时数据库中获取Angularfirelist <unknown>中节点的密钥

Question

我正在从Firebase数据库中获取这些类别。

数据库快照：

这里是CategoryService，而getCategories返回AngularFireList<unknown>。

export class CategoryService {
  constructor(private db: AngularFireDatabase) {}

   getCategories(){
     return this.db.list('/categories', category => category.orderByChild('name'));
   }
}

这是ProductComponant。

export class ProductFormComponent {
  categories;
  constructor(
    categoryService: CategoryService,
    private productService: ProductService
  ) {
    categoryService.getCategories().valueChanges().subscribe((categories) => {
      this.categories = categories;
    });
  }

在categories中，我得到了。

这是HTML标记

<div class="form-group">
        <label for="category">Category</label>
        <select ngModel name="category" class="form-control" id="category">
            <option *ngFor="let c of categories" [value]="c.$key"> {{c.name}} </option>      
        </select>
    </div>

在这里，我要获取类别中每个节点的键/ ID，并将其在DropDown类别中设置为Value。

我尝试了c.key，c.$key，c.id和c | json。但没有一个。

Answer 1

嘿，请如下所示进行更改：

<div class="form-group">
        <label for="category">Category</label>
        <select name="category" class="form-control" id="category" [(ngModel)}="category">
            <option *ngFor="let c of categories" [ngValue]="c.name"> {{c.name}} </option>      
        </select>
    </div>

您的控制器文件中应该有一个名为category的属性。进行更改后，在选择上您可以在category变量中看到所选的值。

Answer 2

好的，我明白了。问题出在.valueChanges()上，因为它仅返回数据，而不返回元数据。所以我将代码更改为。

CategoryService.ts：

export class CategoryService {
  aflCategories: AngularFireList<any>;
  constructor(private db: AngularFireDatabase) {}

   getCategories(){
     this.aflCategories = this.db.list('/categories', category => category.orderByChild('name'));
     return this.aflCategories
     .snapshotChanges()
     .pipe(map(changes => changes
     .map(c => ({ key: c.payload.key, ...c.payload.val() }))));
   }
}

ProductFormComponent.ts：

export class ProductFormComponent {

  categories$: Observable<any[]>;

  constructor(
    categoryService: CategoryService,
    private productService: ProductService,
    private db: AngularFireDatabase
  ) {
    this.categories$ = categoryService.getCategories();
  }

ProductFormComponent.html

<option *ngFor="let c of (categories$ | async)" [value]="c.key"> {{c.name}} </option>

现在我也获得了“钥匙”。