无法使用 firebase 数据填充下拉列表

Question

I trying to populate a dropdown with my firebase data. I am using angular 9.1.9. Please assist.

category.service.ts

constructor(private db: AngularFireDatabase) { }

  getCategories() {
    return this.db.list('/categories', (ref) => ref.orderByChild('name'))
      .snapshotChanges()
      .pipe(
        map((actions) => {
          return actions.map((action) => ({
            key: action.key,
            val: action.payload.val(),
          }));
        })
      );
  }

product-form.component.html

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

products-form-component.ts

export class ProductFormComponent implements OnInit {

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

Answer 1

{{c.val.name}} would help as your val object already contained payload.val() , just need to access name property from it.