Angular Firebase 不显示密钥

Question

我想显示来自 firebasedatabase 的客户端的 $key，它也称为 uniquekey，可能像

-Kdl_wRRkn7njxgz4B54

我尝试但它不显示密钥但显示密钥中的其他数据 也尝试用 key dont 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.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);
  }

}

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;
  }

}

Answer 1

使用snapshotChanges().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() }))
    )
  );  
}

那么你应该可以正常访问了：

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