2017-10-29 6 views
0

同じ問題が発生しています。私はnavbarコンポーネントの中にユーザーの性別を表示しようとします。私は私のサービスを私にユーザーのオブジェクトを取得する必要があり、私はHTMLで使用するために私の '性別'を設定しようとします。問題はジェンダーを表示するためにページを更新する必要があります..何か助けてください? :)角4データを表示するためにページを更新する必要があります

export class NavbarComponent implements OnInit { 


title = 'navbar'; 
    userIsLoggedIn: boolean; 
    user: User; 
    currentUser: Parent; 
    gender: string; 

    constructor(private authenticationService: AuthenticationService, private router: Router, private parentService: ParentService) { 
    authenticationService.userIsloggedIn.subscribe(isLoggedIn => { 
     this.userIsLoggedIn = isLoggedIn; 
     this.user = authenticationService.getUser(); 
    }); 
    } 

    ngOnInit(): void { 
    this.user = this.authenticationService.getUser(); 
    this.userIsLoggedIn = this.user != undefined; 
    this.getParentFromUserEmail(this.user.email); 
    this.getSex(); 
    } 

    private getParentFromUserEmail(email: string) { 
    this.parentService.getByEmail(email).map(
     (response) => this.currentUser = response).subscribe(data => { 
     this.gender = data.type; 
     }); 
    } 

    getSex() { 
    return this.gender; 
    } 
} 

HTMLコード

 <div class="sidebar-account-content"> 
     <h3>{{user?.firstname}} {{user?.lastname}}</h3> 
     <p *ngIf="getSex()">Test</p> 
     <p *ngIf="gender === 'F'">Father</p> 
     <p *ngIf="gender === 'M'">Mother</p> 
     </div> 
+0

初めてページを読み込んだときにコンソールにエラーが表示されますか?可能な問題を再現するためにPlunkerにコードを設定していますか? –

+0

ここでは性別を表示していますが、ハードコードされたテキスト「父」、「母」、「テスト」、 – TruckDriver

答えて

0

私はそれを呼び出すときにそのため、ユーザーのデータを持っていない、あなたの「getUserメソッドは」非同期呼び出しであると仮定します。私はあなたがいくつかのようにしなければならないと思います。

ngOnInit(): void { 
     authenticationService.getUser().then((user)=>{ 
      this.user = user; 
      this.userIsLoggedIn = this.user != undefined; 
      this.getParentFromUserEmail(this.user.email); 
      this.getSex(); 
     } 
    }); 
    } 
0

なぜメソッドに双方向バインディングを作成したいのですか?あなたは、あなたのテンプレートに

<p *ngIf="gender">Test</p> 

は次に、あなただけのテンプレートにそれを変更するために、あなたのcomponent.tsファイルで性別を編集することができると言うことができます。ゲッターの必要はありません。

0

私は問題を解決しました。返品の種類をサービスから約束に変更しました。また、私たちのアプリが起動したときに、安全なプラットフォームからログインページに即座にルーティングします。 appコンポーネントはnavbarをレンダリングして、そこからすべてがバグでいっぱいであってはならないはずです。助けてくれてありがとう、歓声。

関連する問題