如何在Angular项目中从Firebase Firestore获取集合数据

1. 补充TS文件代码 #

首先在文件头部导入所需的Firestore模块化API：

import { getFirestore, collection, getDocs } from 'firebase/firestore';

然后在组件类中声明存储列表数据的变量，补全getData方法：

@Component ...
export class HomeComponent ..
  // 存储从Firestore获取到的列表数据
  items: string[] = [];

  // 从Cloud Firestore的'data'集合中获取全部数据
  async getData() {
    const db = getFirestore();
    const dataCol = collection(db, 'data');
    const dataSnapshot = await getDocs(dataCol);
    // 遍历快照获取所有文档的字段值，你可以根据自己的字段结构调整取值逻辑
    this.items = dataSnapshot.docs.map(doc => doc.data().yourFieldName as string);
  }
  ...
}

注意：上述代码中的yourFieldName需要替换为你data集合中文档实际存储文本内容的字段名。

2. 调整HTML文件绑定动态数据 #

把原来硬编码的列表项改为Angular循环渲染，绑定你获取到的items数组：

<div class="container m-3 p-3">
 <h1>Current Items</h1>
 <ul class="list-group">
  <li class="list-group-item" *ngFor="let item of items">{{ item }}</li>
 </ul>
</div>

注意事项 #

• 请提前确认你的Angular项目已经完成Firebase初始化配置，配置参数与Firebase控制台给出的参数一致
• 如果你需要实时同步Firestore的数据变更，可以替换getDocs为onSnapshot方法实现监听
• 操作前请检查Firestore安全规则配置，确保当前用户有权限读取data集合，避免触发权限错误

内容的提问来源于stack exchange，提问作者Forever Lost Account