angular - 从自定义管道返回异步值 : Angular4

Question

我为我的应用程序创建了一个自定义管道，它将用户 ID 作为参数并返回用户名。为了获得所有用户，我正在进行 api 调用。因此，我想在从 api 获取用户列表后运行循环。我正在做这样的事情:

 transform(userId: number): any {
  this.userInfoService.getUsers().subscribe(
    data => {
       this.allUsers = data;
       for(let user of this.allUser) { 
        if(user.id === userId) {
         return user.userName;
        }
       }
      return null;
    },
    error => {
      console.log('Error');
    })
}

但是当我使用这个管道时，我在 UI 上看不到任何值。我怀疑的问题是异步返回的值。有什么建议可以解决这个问题吗？

Answer 1

我添加了一个return并将subscribe更改为map

 transform(userId: number): any {
  return this.userInfoService.getUsers().map(
    data => {
       this.allUsers = data;
       for(let user of this.allUser) { 
        if(user.id === userId) {
         return user.userName;
        }
       }
      return null;
    },
    error => {
      console.log('Error');
    })
}

然后将它与异步管道一起使用

{{userId | myPipe | async}}