无法从 Angular5 模板中的 firebase 获取 $key [英] Unable to fetch $key from firebase in Angular5 template
问题描述
我正在 Angular5 中使用 firebase 在后端制作表单.该表单包含几个输入字段和一个下拉列表.
我可以在下拉选项中填充值 ({{ c.name }}) 但选项的 value 属性为空,我正在尝试使用 c.$key 填充.
以下是 HTML 部分:
</表单>
这是我的组件:
import { CategoryService } from './../../category.service';从@angular/core"导入 { Component, OnInit };@成分({选择器:'app-product-form',templateUrl: './product-form.component.html',styleUrls: ['./product-form.component.css']})导出类 ProductFormComponent 实现 OnInit {类别$;构造函数(类别服务:类别服务){this.categories$ = categoryService.getCategories();}ngOnInit() {}保存(产品){控制台日志(产品);}}
服务:
import { Injectable } from '@angular/core';从 'angularfire2/database' 导入 { AngularFireDatabase };@Injectable()导出类 CategoryService {构造函数(私有数据库:AngularFireDatabase){}获取类别(){return this.db.list('/categories', ref => ref.orderByChild('name')).valueChanges();}}
我正在控制台上打印表单 json 的值.类别的值即将未定义.
{title: "Title", price: 10, category: "undefined", imageUrl: "xyz"}
请指导我我错过了什么.
$key
已弃用.改用 snapshotChanges()
.
category.service.ts
getCategories() {返回这个.db.list('/categories', (ref) => ref.orderByChild('name')).snapshotChanges().管道(地图((动作)=> {返回 actions.map((action) => ({键:action.key,val: action.payload.val(),}));}));}
app.component.html
I am making a form in Angular5 using firebase in backend. The form contains few input fields and a dropdown.
I'm able to populate values ({{ c.name }}) in dropdown options but value attribute of option is coming empty which I'm trying to populate using c.$key.
Below is the HTML part:
<form #f="ngForm" (ngSubmit)="save(f.value)">
<!-- other input fields here -->
<div class="form-group">
<label for="category">Category</label>
<select ngModel name="category" id="category" class="form-control">
<option value=""></option>
<option *ngFor="let c of categories$ | async" [value]="c.$key">
{{ c.name }}
</option>
</select>
</div>
</form>
Here is my component:
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(categoryService: CategoryService) {
this.categories$ = categoryService.getCategories();
}
ngOnInit() {
}
save(product) {
console.log(product);
}
}
Service:
import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
@Injectable()
export class CategoryService {
constructor(private db: AngularFireDatabase) { }
getCategories() {
return this.db.list('/categories', ref => ref.orderByChild('name')).valueChanges();
}
}
I'm printing value of form json on console. The value of category is coming undefined.
{title: "Title", price: 10, category: "undefined", imageUrl: "xyz"}
Please guide me what am I missing.
$key
has been deprecated. Use snapshotChanges()
instead.
category.service.ts
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(),
}));
}));
}
app.component.html
<option *ngFor="let c of categories$ | async" [value]="c.key">
{{ c.val.name }}
</option>
这篇关于无法从 Angular5 模板中的 firebase 获取 $key的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!