如何使用Ionic 3从Firebase检索已存储的条码列表？

你已经搞定了扫码和数据存储的环节，要取回Firebase里的条码列表其实很简单，我给你一步步拆解：

首先，在home.ts里先定义一个变量，用来存放从Firebase获取到的条码数据：

barcodeList: any[] = [];

接下来编写一个异步方法来获取数据，这里有两种常用方式，你可以根据需求选择：

方式一：获取实时更新的纯数据内容 #

这种方式会自动同步Firebase里的最新数据，适合需要实时展示的场景：

async getBarcodeList() {
  // 监听barcode节点的数据变化，实时更新到barcodeList
  this.db.list('barcode').valueChanges().subscribe((data) => {
    this.barcodeList = data;
    console.log('当前条码列表:', this.barcodeList);
  });
}

方式二：获取数据+每条数据的唯一Key #

如果之后需要对单条条码进行删除、修改操作，这个方式能拿到Firebase自动生成的唯一标识Key：

async getBarcodeList() {
  this.db.list('barcode').snapshotChanges().subscribe((actions) => {
    this.barcodeList = actions.map((action) => {
      return {
        key: action.key, // 获取每条数据的唯一Key
        ...action.payload.val() as any // 展开条码数据内容
      };
    });
    console.log('带Key的条码列表:', this.barcodeList);
  });
}

然后在组件初始化时调用这个方法，确保页面加载时就能获取到数据：

ngOnInit() {
  this.getBarcodeList();
}

可选：在页面上展示条码列表

如果你想把条码列表显示在UI上，修改home.html添加如下代码：

<ion-list>
  <!-- 对应方式一的展示逻辑 -->
  <ion-item *ngFor="let code of barcodeList">
    <p>条码内容: {{ code }}</p>
  </ion-item>

  <!-- 对应方式二的展示逻辑（带Key） -->
  <!-- <ion-item *ngFor="let code of barcodeList">
    <p>Key: {{ code.key }} | 条码: {{ code }}</p>
  </ion-item> -->
</ion-list>

小提示 #

• 开发阶段可以暂时设置Firebase规则允许读取（read: true），上线后一定要配置安全的权限规则，避免数据泄露
• 如果不需要实时更新，可通过take(1)操作符只获取一次数据，记得先导入take：

import { take } from 'rxjs/operators';

async getBarcodeList() {
  this.db.list('barcode').valueChanges().pipe(take(1)).subscribe((data) => {
    this.barcodeList = data;
  });
}

这样就能顺利取回你存在Firebase里的条码列表了！

内容的提问来源于stack exchange，提问作者ICM89