Я получаю только ключ, а не значение из AngularFire2: база данных реального времени версии 5 с использованием Angular 6.0 - PullRequest
Новая
       8

Я получаю только ключ, а не значение из AngularFire2: база данных реального времени версии 5 с использованием Angular 6.0

0 голосов
/ 28 августа 2018

Я просто получаю ключ, а не значение из AngularFire2. Я также попробовал Вопрос Питера Фама , но проблема осталась прежней. 

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

База данных Firebase :

enter image description here

category.service.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};
      })
    }));
  }
}

продакт-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) {
    this.categories$ = categoryService.getCategories();
   }



  ngOnInit() {
  }

}

продукт-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.value.name}} 
   </option>
 </select>

Где я делаю ошибку? Спасибо

1 Ответ

0 голосов
/ 29 августа 2018

В соответствии с рекомендациями Und3rTow теперь это работает. Я пробовал следующий код:

продукт-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>

продакт-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();
  }

}
...