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
1 Asked on October 13, 2020 by knguyen
1 Asked on October 11, 2020 by user12344
3 Asked on October 11, 2020 by reizo
1 Asked on October 10, 2020 by gonzalo-polo
2 Asked on October 9, 2020 by nguyenvivian
0 Asked on October 8, 2020 by paul-martnez-llerena
2 Asked on October 8, 2020 by vldcndn
1 Asked on October 7, 2020 by solar
1 Asked on October 7, 2020 by theoriginof3
1 Asked on October 7, 2020 by user1999453
3 Asked on October 7, 2020 by deitch
2 Asked on October 6, 2020 by raj-endla
0 Asked on October 6, 2020 by madara
1 Asked on October 3, 2020 by singh
0 Asked on October 2, 2020 by turqay-umudzade
3 Asked on October 1, 2020 by pythoncreator
2 Asked on October 1, 2020 by user716255
1 Asked on September 30, 2020 by defarm
Get help from others!
Recent Answers
Recent Questions
© 2023 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP, SolveDir