如何将 Firebase 快照对象分配给 Angular 类型

Question

我在 Angular 中创建了一个客户服务，以从 Firebase 实时数据库中获取客户列表，如下所示：

  getCustomers() {
       return this.db.list('/customers', ref => ref.orderByChild('name')).snapshotChanges(); }

这会成功返回一个 JSON 数组。

然后我定义了Customer接口如下：

export interface Customer {
  name: string;
  address: string;
  type: string;
  phone: string;}

现在，在组件中，我正在尝试访问客户信息，如下所示：

customers: Customer[];
subscription: Subscription;
constructor(private customerService: CustomerService) {
this.subscription = this.customerService.getCustomers().subscribe(customers => this.customers = customers.map(c => c.payload.val()));

}

这给了我一个编译错误“Type Unknow is not assignable to type Customer[]”。 我的问题是：

1. 将 payload().val() JSON 输出转换为客户类型的最佳方法是什么？
2. 如何访问每条记录的密钥？（这是我的页面所必需的）。

非常感谢。

------ 根据 Le_Buzz 的建议和指导，更新了工作解决方案 ------

//首先我更新了客户界面以包含字段“key”，如下所示：

export interface Customer {
  key: string;
  name: string;
  address: string;
  type: string;
  phone: string;}

//声明customers数组如下：

customers: Customer[] = [];

//然后订阅Observable如下：

subscription: Subscription;
  this.subscription = this.customerService.getCustomers().subscribe(cus => {
  cus.forEach(cus => {
    const values = cus.payload.val();
    const key = cus.payload.key;
    this.customers.push({ name: values["name"], key: key, address: values["address"], type: values["type"], phone: values["phone"] })
  })
}) 

Answer 1

首先，我建议你将客户信息从firebase变成一个数组，然后使用数组来构建客户对象（可能有更简洁的方法，但这是我现在能想到的）。至于第二个问题，您可以从 subscribe 方法中获取密钥。请参阅下面对我有用的代码。

注意：我创建了以下变量：

1. productArray 从我的订阅方法构建结果。
2. listData - 我的表的数据源（我在表中呈现了 firebase 调用）。
3. displayColumns 和 columnsTo Display - 这些是特定于我的桌子的。您的实现会有所不同，因此您可以随意忽略/修改与这些变量对话的代码。

基本上，多注意下面的前 8 行：

this.productService.getProducts().subscribe(
  list => {
    this.productsArray = list.map(item => {
      return {
        $key: item.key,
        ...item.payload.val()
      };
    })
    this.listData = new MatTableDataSource(this.productsArray);
    this.displayedColumns = Object.values(Object.keys((this.productsArray)[0]))
    this.columnsToDisplay = this.displayedColumns.slice();
    this.columnsToDisplay.push("actions");
  }
);

最后，根据使用的角度版本，您可能希望通过将 customers: Customer[]; 更改为 customers: Customer[] = []; 来初始化客户变量

如果它解决了您的问题，请将此标记为已回答。谢谢！