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

您的B函数使用了一个可观察对象。如果要将映射逻辑合并到管道中，最简单的方法是使用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')管道输出结果。

用户信息未显示

1 个答案: