不显示用户信息答案

【问题标题】：User information not being displayed不显示用户信息
【发布时间】：2017-04-21 13:25:00
【问题描述】：

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

{{ 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 的安全规则，没问题。我在控制台中没有收到任何错误。

【问题讨论】：

您有一个异步请求正在进行，这意味着您在调用中分配数据之前return data[field]。
您可以考虑将此管道设为async 管道，从Pipe 返回this.af.database.object(/users/${uid}) 并查看然后使用{{ (author.id |用户 | async) ?.name }}
如何观察管道中的变化？你知道为什么作者登录时不会出现这种情况吗？
谢谢，@PankajParkar。简单而好主意！哈哈
@drbishop 但我并没有真正考虑为它创建专用的Pipe。我宁愿在我的组件中创建一个 observable 并按照我展示的那样放置异步管道。这就是我没有添加答案的原因

标签： javascript angular typescript firebase angularfire2

【解决方案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 管道传递结果。

【讨论】：