How to get the key of an element in firebase with AngularFire2?

Stack Overflow Asked by Juan Esteban Rios Gonzalez on January 5, 2022

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">
        <tr *ngFor="let p of products$ | async">
            <td>{{ p.title }}</td>
            <td>{{ p.price }}</td>
                <a [routerLink]="['/admin/products/', p.$key]">Edit</a>

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();

One Answer

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 }} for development and you can see all of the values in the object in your browser.

Answered by Ben Bradshaw on January 5, 2022

Add your own answers!

Ask a Question

Get help from others!

© 2024 All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP