在Angular 6中,要从Firebase实时数据库中获取基于键的单条记录,可以按照以下步骤进行操作:
app.module.ts
文件中导入Firebase模块来实现:import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';
// Firebase配置
const firebaseConfig = {
apiKey: 'YOUR_API_KEY',
authDomain: 'YOUR_AUTH_DOMAIN',
databaseURL: 'YOUR_DATABASE_URL',
projectId: 'YOUR_PROJECT_ID',
storageBucket: 'YOUR_STORAGE_BUCKET',
messagingSenderId: 'YOUR_MESSAGING_SENDER_ID'
};
@NgModule({
imports: [
AngularFireModule.initializeApp(firebaseConfig),
AngularFireDatabaseModule
],
// ...
})
export class AppModule { }
import { Component } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';
@Component({
selector: 'app-your-component',
template: `
<div>{{ data | json }}</div>
`
})
export class YourComponent {
data: any;
constructor(private db: AngularFireDatabase) { }
ngOnInit() {
const key = 'YOUR_RECORD_KEY';
const ref = this.db.object('/your-collection/' + key).valueChanges();
ref.subscribe(data => {
this.data = data;
});
}
}
ngOnInit
生命周期钩子中,使用AngularFireDatabase
的object()
方法来获取对应键的记录。将valueChanges()
方法应用于引用,以订阅数据的变化。当数据发生变化时,将其赋值给组件中的data
属性。请注意,上述代码中的YOUR_API_KEY
、YOUR_AUTH_DOMAIN
、YOUR_DATABASE_URL
、YOUR_PROJECT_ID
、YOUR_STORAGE_BUCKET
和YOUR_MESSAGING_SENDER_ID
应替换为您自己Firebase项目的配置信息。YOUR_RECORD_KEY
应替换为您要获取的记录的键。
推荐的腾讯云相关产品:腾讯云数据库(TencentDB),产品介绍链接地址:https://cloud.tencent.com/product/cdb
领取专属 10元无门槛券
手把手带您无忧上云