Javascript 角度firebase不显示关键点

我想显示firebasedatabase中客户端的$key，它也被称为uniquekey

-Kdl_wRRkn7njxgz4B54

我尝试了，但它不显示键，而是显示键中的其他数据 同时尝试用key not work替换$key。我知道如果有人可以的话，它需要修改代码。谢谢：）

client.html

    <div class="row">
  <div class="col-md-6">
    <h2><i class="fa fa-users"></i> Clients</h2>
  </div>
  <div class="col-md-6">
    <h5 class="pull-right text-muted">Total Owed: {{totalOwed | currency:"USD":true}}</h5>
  </div>
</div>
<table *ngIf="clients?.length > 0;else noClients" class="table table-striped">
  <thead class="thead-inverse">
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Email</th>
      <th>Balance</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let client of clients">
      <td>{{client.$key}}</td>
      <td>{{client.firstName}} {{client.lastName}}</td>
      <td>{{client.email}}</td>
      <td>{{client.balance | currency:"USD":true}}</td>
      <td><a [routerLink]="['/client/'+client.$key]" href="" class="btn btn-secondary btn-sm"><i class="fa fa-arrow-circle-o-right"></i> Details</a></td>
    </tr>
  </tbody>
</table>

<ng-template #noClients>
  <hr>
  <h5>There are no clients in the system</h5>
</ng-template>

客户
欠款总额：{{欠款总额|货币：“美元”：真实}
身份证件
名称
电子邮件
平衡
{{client.$key}}
{{client.firstName}{{client.lastName}}
{{client.email}
{{client.balance}货币：“USD”：真}

系统中没有客户端

client.ts

import { Component, OnInit } from '@angular/core';
import { ClientService } from '../../services/client.service';
import { Client } from '../../models/Client';

@Component({
  selector: 'app-clients',
  templateUrl: './clients.component.html',
  styleUrls: ['./clients.component.css']
})
export class ClientsComponent implements OnInit {
clients:any[];
  totalOwed:number;

  constructor(
    public clientService:ClientService
  ) { }

  ngOnInit() {
    this.clientService.getClients().valueChanges().subscribe(clients => {
      this.clients = clients;
      this.getTotalOwed();
    });
  }

    getTotalOwed(){
    let total = 0;
    for(let i = 0;i < this.clients.length;i++){
      total += parseFloat(this.clients[i].balance);
    }
    this.totalOwed = total;
    console.log(this.totalOwed);
  }

}

从'@angular/core'导入{Component，OnInit}；
从“../../services/client.service”导入{ClientService}；
从“../../models/Client”导入{Client}；
@组成部分({
选择器：“应用程序客户端”，
templateUrl:'./clients.component.html'，
样式URL:['./clients.component.css']
})
导出类ClientsComponent实现OnInit{
客户：任何[]；
总数：数字；
建造师(
公共客户端服务：客户端服务
) { }
恩戈尼尼特（）{
this.clientService.getClients（）.valueChanges（）.subscribe（客户端=>{
这个。客户=客户；
this.getTotalOwed（）；
});
}
getTotalOwed（）{
设total=0；
for（设i=0；i

client.service.ts

import { Injectable } from '@angular/core';
import { AngularFireDatabase} from 'angularfire2/database';
import { AngularFireObject, AngularFireList } from 'angularfire2/database';
import { Observable } from 'rxjs';
import { Client } from '../models/Client';

@Injectable()
export class ClientService {
  clients: AngularFireList<any>;
  client: AngularFireObject<any>;

  constructor(
    public af:AngularFireDatabase
  ) { 
    this.clients = this.af.list('/clients') as AngularFireList<Client[]>;
  }

  getClients(){
    return this.clients;
  }

  newClient(client:Client){
    this.clients.push(client);
  }

  getClient(id:string){
    this.client = this.af.object('/clients/'+id) as AngularFireObject<Client>;
    return this.client;
  }

}

从'@angular/core'导入{Injectable}；
从“angularfire2/database”导入{AngularFireDatabase}；
从“angularfire2/数据库”导入{AngularFireObject，AngularFireList}；
从“rxjs”导入{Observable}；
从“../models/Client”导入{Client}；
@可注射（）
导出类客户端服务{
客户：AngularFireList；
客户：AngularFireObject；
建造师(
公共af:AngularFire数据库
) { 
this.clients=this.af.list（'/clients'）作为AngularFireList；
}
getClients（）{
把这个还给我的客户；
}
新客户端（客户端：客户端）{
this.clients.push（客户机）；
}
getClient（id:字符串）{
this.client=this.af.object（'/clients/'+id）作为AngularFireObject；
将此文件退还给客户；
}
}

使用

快照更改（）.map（）

存储密钥：

constructor(
  public af:AngularFireDatabase
) { 
  this.clientsRef = this.af.list('/clients') as AngularFireList<Client[]>;
  this.clients = this.clientsRef.snapshotChanges().pipe(
    map(changes => 
      changes.map(c => ({ key: c.payload.key, ...c.payload.val() }))
    )
  );  
}

构造函数(
公共af:AngularFire数据库
) { 
this.clientsRef=this.af.list（“/clients”）作为AngularFireList；
this.clients=this.clientsRef.snapshotChanges（）.pipe(
映射（更改=>
map（c=>（{key:c.payload.key，…c.payload.val（）}））
)
);  
}

然后您应该能够正常访问它：

<td>{{client.key}}</td>

{{client.key}

它显示错误类型“Observable”不可分配给类型“AngularFireObject”。类型“Observable”中缺少属性“query”。并且找不到地图