[英]Trying to get values from cloud Firestore using keyvalue (Angular)
My firebase database has a collection called users.我的 firebase 数据库有一个名为 users 的集合。 I'm able to access it with the following code:
我可以使用以下代码访问它:
in my service:在我的服务中:
users$ = this.afs.collection<Users[]>('users').valueChanges();
in my component:在我的组件中:
public users = this.firestoreService.users$.pipe(tap(console.log));
when I just do当我只是做
{{users | async | json}}, I get the object no problem.
<pre>{{users | async | json}}</pre> <table class="table"> <thead> <tr> <th>Name</th> <th>Email</th> <th>Phone</th> <th>Role</th> </tr> </thead> <tbody *ngIf="users"> <tr *ngFor="let user of users | async | keyvalue"> <td>{{user.value.displayName}} </td> </tr> </tbody> </table>
if I do user.key, I get the key in the array.如果我执行 user.key,我会得到数组中的键。 can't reach the 'inner' keys or values.
无法到达“内部”键或值。 this is my user class:
这是我的用户 class:
export interface Users { displayName: string; email: string; phoneNumber: null; role: string; }
You are returning an Observable<Users[]>
in users$.您将在 users$ 中返回一个
Observable<Users[]>
。 As such when using users interpolated with async pipe, you are already getting an array Users[]
which is an iterable.因此,当使用使用异步 pipe 插入的用户时,您已经获得了一个可迭代的数组
Users[]
。
So change your HTML to:因此,将您的 HTML 更改为:
<tr *ngFor="let user of users | async">
<td>{{user.displayName}} </td>
</tr>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.