未显示用户信息

Question

我有一个案例，我使用管道显示一些用户信息：

{{ author.id | user: 'name' }}

我从作者那里得到 id，然后，我使用 user 管道获取其存储在 /users/$uid 中的信息。这是我的烟斗：

export class UserPipe implements PipeTransform {
  constructor(private af: AngularFire) {}

  transform(uid: string, field: any): any {
    let data = {};

    let fb = this.af.database.object(`/users/${uid}`);
    fb.subscribe(res => {
      data = res;
      console.log(data[field]);
    });

    return data[field];
  }
}

如果作者是当前登录的用户，这可以正常工作。但是，不会为其他人显示该名称。

该名称已正常打印在控制台中，但仍未显示在 HTML 中。我还仔细检查了 Firebase 的安全规则，没问题。我在控制台中没有收到任何错误。

Answer 1

您的 transform() 函数使用了一个可观察对象。如果您想将映射逻辑合并到管道中，最简单的方法是用 AsyncPipe 包装您的结果。

@Pipe({
  name: 'user',
  pure: false
})
export class UserPipe implements PipeTransform {
  private asyncPipe: AsyncPipe;

  constructor(ref: ChangeDetectorRef, private af: AngularFire) {
    this.asyncPipe = new AsyncPipe(ref);
  }

  transform(uid: string, field: any): any {
    let fb = this.af.database.object(`/users/${uid}`).map(res => res[field]);
    return this.asyncPipe.tranform(fb);
  }
}

或者如果你想在一个组件中实现这个功能，虽然不推荐，只是为了好玩

@Component({
  selector: 'my-user',
  template: '{{ result | async }}'
})
export class UserComponent {
  @Input() uid: string;
  @Input() field: string;
  result: Observable<any>;

  constructor(private af: AngularFire) {}

  ngOnChanges(changes: SimpleChanges) {
    let field = changes.field.currentValue;
    let uid = changes.uid.currentValue;
    if (uid && field) {
      this.result = this.af.database.object(`/users/${uid}`).map(res => res[field]);
    }
    else {
      this.result = Observable.of(null);
    }
  }
}

将其用于：

<my-user uid="12345" field="name"></my-user>

或者，您可以按照评论中的建议进行操作，只需 return this.af.database.object('/users/uid') 并将结果用 async 管道传递。

未显示用户信息

User information not being displayed

javascript

firebase

typescript

angularfire2

angular