[英]I'm getting just key not the value from AngularFire2: Realtime Database version 5 using Angular 6.0
I'm just getting key not the value from AngularFire2. 我只是获得密钥而不是AngularFire2的价值。 I also tried the Peter Pham Question but the issue remain same. 我也尝试过Peter Pham问题,但问题仍然存在。
"@angular/core": "^6.0.0",
"angularfire2": "^5.0.0-rc.11",
Firebase database : Firebase数据库 :
category.service.ts: 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};
})
}));
}
}
product-form.component.ts: 产品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() {
}
}
product-form.component.html: 产品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>
Where I'm making error? 我在哪里犯错误? Thanks 谢谢
As recommended by Und3rTow now it's working. 正如Und3rTow推荐的那样现在它正在发挥作用。 I have tried the following code: 我试过以下代码:
product-form.component.html : product-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>
product-form.component.ts : product-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();
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.