在Angular项目的ngFor循环中从Cloud Firestore提取数据

时间:2018-12-01 03:31:36

标签: angular pipe google-cloud-firestore ngfor

我目前正在Angular项目中处理帖子列表。每个帖子都有海报的内容和用户ID。

在每个帖子中,我想使用帖子的用户ID从Cloud Firestore中获取用户的姓名和年龄。但是我在下面出现错误。

ERROR Error: Function CollectionReference.doc() requires its first argument to be of type non-empty string, but it was: a custom Object object
    at new FirestoreError (index.cjs.js:346)

我应该怎么做?另外,有没有办法不使用管道两次来命名和年龄?

这是Post类。

export class Post {
  postId: string;
  userId: string;
  content: string;
}

这是用户类。

export class User {
  userId: string;
  name: string;
  age: number;
}

这是帖子列表的模板。

<div *ngFor="let post of (posts | async)>
  <div>Name: {{(post.userId | userIdToUser | async)?.name}}</div>
  <div>Age: {{(post.userId | userIdToUser | async)?.age}}</div>
  <div>Content: {{post.content}}</div>
</div>

这是将userId转换为User的Observable的管道。

import { Pipe, PipeTransform } from '@angular/core';
import { User } from '../user';
import { UserService } from '../user.service';
import { Observable } from 'rxjs';

@Pipe({
  name: 'userIdToUser'
})
export class UserIdToUserPipe implements PipeTransform {

  constructor(private userService: UserService){}

  transform(value: string, args?: any): Observable<User> {
    return this.userService.getUserWithId(value);
  }
}

0 个答案:

没有答案