下面是一个使用Angular 8/9和Firebase进行CRUD操作的更新示例代码:
npm install firebase @angular/fire
environment.ts
文件中配置Firebase凭据:export const environment = {
production: false,
firebase: {
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',
appId: 'YOUR_APP_ID'
}
};
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { environment } from '../environments/environment';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFirestoreModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
AngularFirestore
:import { Component } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private firestore: AngularFirestore) {}
updateData() {
this.firestore
.collection('items')
.doc('ITEM_ID')
.update({ name: 'New Name', description: 'New Description' })
.then(() => {
console.log('Document successfully updated!');
})
.catch((error) => {
console.error('Error updating document: ', error);
});
}
}
updateData()
方法来更新数据:
在这个示例中,我们使用AngularFirestore
服务从Firebase中获取items
集合的文档,并使用update()
方法更新文档的数据。你需要替换ITEM_ID
为你自己的文档ID,并根据你的数据模型更新文档的字段和值。
记得在Firebase控制台中设置正确的规则来允许读写操作。