简介
angular-7-angularfire-2-crud-tutorial 是一个基于 Angular 和 Firebase 的应用程序示例。它演示了如何创建一个基本的 CRUD 应用程序，包括添加，读取，更新和删除数据。它还演示了如何使用 Firebase 的身份验证功能来添加用户注册和登录功能。
安装
要使用 angular-7-angularfire-2-crud-tutorial，您需要使用 npm 包管理器在项目中安装它。请使用以下命令：
npm install angular-7-angularfire-2-crud-tutorial --save
使用
angular-7-angularfire-2-crud-tutorial 提供了一个完整的示例应用程序，您可以在此基础上进行开发。在您的项目中，您需要导入 AngularFireModule 和 AngularFireAuthModule 模块，并将它们添加到您的应用程序模块的 imports 数组中。
这里是一个示例应用程序：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------- - ---- ------------------------
------ - ---------- - ---- -------
------------
--------- -----------
--------- -
----
--- ----------- ---- -- ----- - -------
-- --------- --
-----
-----
-
--
------ ----- ------------ -
------ ------------------
--------------- -------------------- -
---------- - --------------------------------
-
-这个组件从 Firebase 数据库中获取一个 items 列表，并将它们显示在一个简单的列表中。使用 db.list('items').valueChanges() 方法可以轻松获取 Firebase 数据库中的数据。
示例代码
这里是一个简单的示例，演示如何使用 angular-7-angularfire-2-crud-tutorial 在一个 Angular 应用程序中执行 CRUD 操作。首先，您需要导入必要的模块：
import { AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs';然后，您可以使用以下代码获取数据库中的所有项目：
// 获取项目
items: Observable<any[]>;
constructor(private db: AngularFireDatabase) {
this.items = db.list('items').valueChanges();
}这将使用 AngularFireDatabase 服务从 Firebase 数据库中获取一个 items 列表，并将其存储到 items 可观察对象中。然后，您可以在模板中使用它来显示列表：
<!-- 显示列表 -->
<ul>
<li *ngFor="let item of items | async">
{{ item.name }}
</li>
</ul>要添加新项目，请使用以下方法：
// 添加新项目
addItem(item: any) {
this.db.list('items').push(item);
}此代码将新项目添加到 Firebase 数据库的 items 列表中。
要更新现有项目，请使用以下代码：
// 更新项目
updateItem(key: string, value: any) {
this.db.list('items').update(key, value);
}此代码将使用 .update() 方法更新在 Firebase 数据库中具有特定 key 的项目。
要删除项目，请使用以下代码：
// 删除项目
deleteItem(key: string) {
this.db.list('items').remove(key);
}此代码将使用 .remove() 方法从 Firebase 数据库中删除具有特定 key 的项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672eb0520b171f02e1e5d