如何使用AngularFire2获取firebase中元素的密钥？

Question

I am displaying a table of products in my Angular project, it displays just fine but the link which I want in the format /admin/products/key doesnt work. I have come to the conclussion that the p.$key isnt showing the key:

  <table class="table">
    <thead>
        <th>Title</th>
        <th>Price</th>
        <th></th>
    </thead> 
    <tbody>
        <tr *ngFor="let p of products$ | async">
            <td>{{ p.title }}</td>
            <td>{{ p.price }}</td>
            <td>
                <a [routerLink]="['/admin/products/', p.$key]">Edit</a>
            </td>
        </tr>
    </tbody>
</table>

p.$key value is undefined, does someone knows how to fix it?

Ps: If anyone needs to know the value of products$ , it is equal to this.products$ = this.productService.getAll().valueChanges();

Answer 1

Add the idField property inside of valueChanges like this:

this.productService.getAll().valueChanges({idField: '$key'});

Then the firebase id will be available within your object like this: p.$key

Also, consider using the json pipe like {{ p | json }} {{ p | json }} for development and you can see all of the values in the object in your browser.