カスタムパイプから非同期の値を返す：Angular4

ユーザーIDを引数とし、ユーザー名を返すアプリケーション用のカスタムパイプを作成しました。すべてのユーザーを取得するため、私はAPI呼び出しを行っています。したがって、私はAPIのユーザーリストを取得した後にループを実行したい。私はこのようなことをしています：カスタムパイプから非同期の値を返す：Angular4

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の値を見ていません。私が疑う問題は、値が非同期的に返されることです。どのようにこれを修正することができますか？

出典

2017-08-24 Aiguo

私はreturnを加えた後、魔法のように動作し、非同期パイプ

{{userId | myPipe | async}}

出典

2017-08-24 16:56:57

とそれを使う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'); }) }

をsubscribeを変更！しかし、userIdをuserNameに変換するたびに、api呼び出しを行わない他のソリューションはありますか？なぜなら、* ngForに長いuserIdsのリストがあると、各userIdのapi呼び出しが行われるからです。 – Aiguo

「あなたがuserIdをuserNameに変換しているたびに」とは、どういう意味なのかよく分かりません。結果をキャッシュする共有サービスを使用できます。これはここで役立つかもしれませんhttps://stackoverflow.com/questions/36271899/what-is-the-correct-way-to-share-the-result-of-an-angular-2-http-network-call-in/ 36291681＃36291681 –

カスタムパイプから非同期の値を返す：Angular4

答えて

関連する問題