如何从 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>

这里我想获取Categories中每个节点的key/id，并将其设置为类别DropDown中的Value。

我试过 c.key、c.$key、c.id 和 c | json。但是 none 有效。

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 的属性。进行此更改后，您可以在选择中看到类别变量中的所选值。

Answer 2

好的，我明白了。问题出在 .valueChanges() 因为它 returns 只有数据而不是元数据。所以我将代码更改为。

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>

现在我也得到了 'Key'。

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

How to get a key of node in Angularfirelist<unknown> from Firebase Realtime Database

typescript

firebase-realtime-database

angularfire2

angular