Augular 2の関数からの応答が終わらない

Question

私はAngular 2を使用していますが、ユーザーIDからユーザーニックネームを表示しようとしています。

comments.component.htmlからgetUserName（userId）関数を呼び出すと、auth0サービスが呼び出されてユーザープロファイルが取得されます。その結果、私は継続的な応答を受けており、ユーザーニックネームを表示できません。 console.log（user）は決して応答を表示しません！コメントコンポーネントは、feeds.component.htmlにネストされています。各IDは異なる可能性がありますので、毎回その関数を呼び出す必要があります。

見つけてください以下のコード：

comments.component.html

<ul class="list-group" *ngIf="commentsArray.length>0"> 
    <li class="list-group-item" *ngFor="let comment of commentsArray; let i = index"> 
    {{getUserName(comment.comment_by)}}: {{comment.comment_text}} 
    </li> 
</ul> 

comments.component.ts

import { Component, Input, OnInit } from '@angular/core'; 
import { FeedsService } from '../../services/feeds/feeds.service'; 
import { AuthService } from '../../services/auth.service'; 
import { Auth0Service } from '../../services/auth0/auth0.service'; 

@Component({ 
moduleId: module.id, 
selector: 'comments', 
templateUrl: 'comments.component.html', 
providers: [FeedsService] 
}) 

export class CommentsComponent implements OnInit { 
@Input() commentsType:string; 
@Input() editId:string; 
@Input() data:any; 

constructor(private authService: AuthService, private _feedsService: FeedsService, private _auth0Service: Auth0Service){ 
} 

ngOnInit(){ 
    this.commentsArray=this.data.comments; 
} 

getUserName(userId:string){ 
    let userName:string; 
    this._auth0Service.getUser(userId) 
     .subscribe(user=>{ 
      console.log(user); 
      userName=user.nickname; 
     }); 
    return userName; 
    } 
} 

auth0.service.ts

import {Injectable} from '@angular/core'; 
import {Http, Headers, RequestOptions} from '@angular/http'; 
import { AuthHttp } from 'angular2-jwt'; 
import 'rxjs/add/operator/map'; 

@Injectable() 
export class Auth0Service { 

constructor(private _http:Http, private _authHttp: AuthHttp) { 
} 

getUser(userId: string){ 
    let headers = new Headers({'Content-Type': 'application/json'}); 
    headers.append('Authorization', 'Bearer token'); 
    let options = new RequestOptions({headers: headers}); 
    return this._http.get('https://url.auth0.com/api/v2/users/'+userId, options) 
    .map(res => res.json()); 
    } 
} 

feeds.component.htmお早めのヘルプを待ちリットル

<div class="col-sm-12 feed-container" *ngFor="let feed of feeds; let i = index"> 
    <comments [commentsType]="commentsType" [editId]="feed._id" [data]="feed"> 
    </comments> 
</div> 

app.module.ts

@NgModule({ 
    imports:  [ BrowserModule, Routing, HttpModule, ... ], 
    bootstrap: [ AppComponent ], 
    providers: [ AUTH_PROVIDERS, AuthService, Auth0Service, AuthGuard, ... ] 
}) 
export class AppModule { } 

。

あなただけの非同期呼び出し

getUserName(userId:string){ 
    let userName:string; 
    this._auth0Service.getUser(userId) 
     .subscribe(user=>{ 
      console.log(user); 
      userName=user.nickname; 
    }); 
    // when this line is executed `userName` has no value yet 
    return userName; 
} 

から値を返すことはできませんアッバス

Answer 1

あなたは

prevUserId:string; 
prevObservable; 

getUserName(userId:string){ 
    if(this.prevUserId === userId) { 
    return this.prevObservable; 
    } 
    this.prevUserId = userId; 
    this.prevObservable = this._auth0Service.getUser(userId) 
     .map(user=>{ 
      console.log(user); 
      return user.nickname; 
     }); 
    return this.prevObservable; 
} 

と

{{getUserName(comment.comment_by) | async}} 

のような値と同様に観察を返すことができます