ファイヤーストアのドキュメントIDを取得してHTMLに追加

Question

私は最初の角度アプリを構築しており、ファイアストアを統合しようとしています。 これまでのところ、Firestoreからデータを取得してスナップショットでIDを記録することができましたが、私はすべて一緒に持ち込むことができません。

idをクライアントモデルに追加する方法はありますか？

私はanglefire2のドキュメントを読んでいましたが、$ keyプロパティは使用できないと言われましたが、今はスナップショットを使用する必要がありますが、わかりません。

おかげ

は、これは私のサービス

@Injectable() 
export class ClientService { 
    clientsCollection: AngularFirestoreCollection<Client>; 
    clients: Observable<Client[]>; 
    snapshot: any; 
    constructor(private afs: AngularFirestore) { 
    this.clientsCollection = this.afs.collection('clients'); 
    this.clients = this.clientsCollection.valueChanges(); 
    // snapshot for id/metadata 
    this.snapshot = this.clientsCollection.snapshotChanges() 
     .map(arr => { 
     console.log(arr); 
     }); 
    } 
} 

マイclient.component.ts

@Component({ 
    selector: 'app-clients', 
    templateUrl: './clients.component.html', 
    styleUrls: ['./clients.component.css'] 
}) 
export class ClientsComponent implements OnInit { 
    clients: Client[]; 
    snapshots: any[]; 
    constructor(
    public clientService: ClientService 
){} 

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

そして、私のclient.component.htmlある

<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></td> 
     <td>{{ client.firstName }} {{ client.lastName }}</td> 
     <td>{{ client.email }}</td> 
     <td>{{ client.balance }}</td> 
     <td><a href="" class="btn btn-secondary btn-sm">Details</a></td> 
    </tr> 
    </tbody> 

</table> 

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

this is what I have so far

Answer 1

あなたはangularfire2 documents

export class AppComponent { 
    private shirtCollection: AngularFirestoreCollection<Shirt>; 
    shirts: Observable<ShirtId[]>; 
    constructor(private readonly afs: AngularFirestore) { 
    this.shirtCollection = afs.collection<Shirt>('shirts'); 
    // .snapshotChanges() returns a DocumentChangeAction[], which contains 
    // a lot of information about "what happened" with each change. If you want to 
    // get the data and the id use the map operator. 
    this.shirts = this.shirtCollection.snapshotChanges().map(actions => { 
     return actions.map(a => { 
     const data = a.payload.doc.data() as Shirt; 
     const id = a.payload.doc.id; 
     return { id, ...data }; 
     }); 
    }); 
    } 
} 

と、このテンプレート

<ul> 
    <li *ngFor="let shirt of shirts | async"> 
    {{ shirt.id }} is {{ shirt.price }} 
    </li> 
</ul> 

で答えを見つけることができます