Как получить ключ узла в Angularfirelist <unknown>из базы данных Firebase Realtime - PullRequest
Новая
       17

Как получить ключ узла в Angularfirelist <unknown>из базы данных Firebase Realtime

0 голосов
/ 15 апреля 2020

Я получаю эти категории из базы данных 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>

Здесь я хочу получить ключ / идентификатор каждого узла в Категории и установить его в качестве значения в категории DropDown.

Я пробовал c.key, c.$key, c.id и c | json. но ничего не работает.

Ответы [ 2 ]

0 голосов
/ 15 апреля 2020

Хорошо, я понял. проблема в .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>

и теперь я тоже получил «Ключ».

0 голосов
/ 15 апреля 2020

Эй, пожалуйста, измените его, как показано ниже: 

<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. После того, как вы внесете это изменение, при выборе вы увидите выбранное значение в переменной категории.

...