角火基不显示钥匙

Question

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

-Kdl_wRRkn7njxgz4B54

我尝试了，但它没有显示键，但在键中显示其他数据 还尝试用键替换$key不起作用。我知道如果有人可以的话，它需要更改代码:)

客户端.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>

客户端.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>