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">
<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();
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
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP