Retrive firestore documentId 및 html에 추가

Question

나는 첫 번째 각도 응용 프로그램을 제작 중이며 Firestore를 통합하려고합니다. 지금까지 파이어 스토어에서 데이터를 검색 할 수 있었지만 스냅 샷으로 ID를 기록했지만 모두 함께 가져올 수는 없습니다.

클라이언트 모델에 ID를 추가 할 수있는 방법이 있습니까?

나는 $ key 속성을 사용할 수 없다고 말하는 angularfire2 문서를 읽고 있었지만 지금은 스냅 샷을 사용해야하지만 알아낼 수는 없습니다.

감사

이 내 서비스

@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>