* ngIfは、私は、コンソールでそのshowBirthdayTheme変数をログに記録しています適切に

Question

HTML

<figure class="daysearch-cover__image"> 
 
     <img src="fh.jpg" *ngIf="!showBirthdayTheme"> 
 
     <img src="fhbt.jpg" *ngIf="showBirthdayTheme"> 
 
</figure>

が機能していません。その値が真であることは明らかですが、 "fhbt.jpg"の代わりに "fh.jpg"が読み込まれています。

ここで何が間違っているのか理解できません。

EDIT：コンポーネントコード を追加し、私は角に非常に新しいだと私は何の失態をやった場合は親切に私を修正。示唆されるように

import { Component } from '@angular/core'; 
import { AngularFire, AuthProviders, AuthMethods, FirebaseListObservable } from 'angularfire2'; 


declare const FB : any; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    title = 'Themes POC!'; 

    items: FirebaseListObservable<any>; 
    name: any; 
    msgVal: string = ''; 
    userName: string = ''; 
    photoURL : string = ''; 
    graphPhotoURL : string = ''; 
    showNasLogin: any; 
    showLogoutMessage: any; 
    dob : string = ''; 
    showBirthdayTheme: boolean = false; 
    theme: String= ''; 

    constructor(public af: AngularFire) { 
    this.items = af.database.list('/messages', { 
     query: { 
     limitToLast: 50 
     } 
    }); 

    this.af.auth.subscribe(auth => { 
     if(auth) { 
     this.name = auth; 
     this.userName = auth.facebook.displayName; 
     this.photoURL = auth.facebook.photoURL; 
     this.graphPhotoURL = "https://graph.facebook.com/" + auth.facebook.uid + "/picture?height=67&width=70"; 
     this.dob = "https://graph.facebook.com/" + auth.facebook.uid + "/birthday"; 
     } 
    }); 

    } 


    setShowNasLogin(): void { 
    console.log("inside setShowNasLogin"); 
    this.showNasLogin = "yes"; 
    this.showLogoutMessage = null; 
    this.name = null; 
    } 

    resetShowNasLogin(): void { 
    console.log("inside resetShowNasLogin"); 
    this.showNasLogin = undefined; 
    this.name = undefined; 
    this.showLogoutMessage = "yes"; 
    } 

    login(){ 

    //retrieving DOB 
    this.onFBLogin(); 

    this.af.auth.login({ 
     provider: AuthProviders.Facebook, 
     method: AuthMethods.Popup 
    }); 

    } 

    logout(){ 
    this.af.auth.logout().then(() => { 
     console.log(this.graphPhotoURL); 
             this.name = null; 
             this.userName = ''; 
             this.photoURL = ''; 
             this.graphPhotoURL = ''; 
             this.showBirthdayTheme = false; 
             console.log("Successfully logged out") 
             }); 
    this.resetShowNasLogin(); 
    } 

    chatSend(desc: string){ 
    this.items.push({message: desc, name: this.name.facebook.displayName}); 
    this.msgVal = ''; 
    } 

    onFBLogin() { 
    console.log("Trying to get birthdate"); 

    FB.login(function(response) { 
    console.log("inside FB.login"); 
    if(response.authResponse) { 
     FB.api('/me', 'GET', {fields: 'email, first_name, name, id, picture, birthday'}, function(response) { 
     console.log("User's DOB:"+ response.birthday); 
     var birthDate = new Date(response.birthday+''); 
     var currentDate = new Date(); 
     birthDate.setFullYear(currentDate.getFullYear()); 
     if(birthDate < currentDate){ 
      birthDate.setFullYear(birthDate.getFullYear()+1); 
     } 
     var diff = birthDate.getTime()-currentDate.getTime(); 
     var days = Math.floor(diff/(1000*60*60*24)); 
     console.log("No of days left for "+response.name+"'s birthday :"+days); 

     //if birth month is with in coming 2 months 
     if(days < 40){ 
      console.log("setting theme"); 
      this.showBirthdayTheme = true; 
     } 
     console.log("showBirthdayTheme:" +this.showBirthdayTheme); 
     if(this.showBirthdayTheme){ 
      console.log("Birthday theme should be displayed"); 
     } 
     else{ 
      console.log("Default theme should be displayed"); 
     } 

     }); 
    } 
    else{ 
     //error 
     console.log("Errored while trying to connect to facebook"); 
    } 
    }, { 
    scope: 'email, user_birthday', 
    return_scopes: true 
    } 
); 

} 

    /*selectTheme(){ 
    /!*this.dobRes = this.dob.split("/"); 
    console.log(this.dobRes[0]);*!/ 

    var birthDate = new Date(this.dob); 
    console.log("user birthday:"+birthDate); 
    console.log(birthDate.getMonth()); 
    }*/ 
} 

は、関数呼び出しを変更：

FB.login（（応答）=> {

ログは以下の通りである以下に変更

FB.login(function(response) { 

を：

app.component.ts:48 inside setShowNasLogin 
app.component.ts:92 Trying to get birthdate 
app.component.ts:95 inside FB.login 
app.component.ts:98 User's DOB:06/01/1990 
app.component.ts:107 No of days left for Ravi Teja Gubba's birthday :36 
app.component.ts:111 setting theme 
app.component.ts:114 showBirthdayTheme:true 
app.component.ts:116 Birthday theme should be displayed 

Answer 1

同じ問題に直面した。理由を知らない。しかし、ng-ifの代わりにng-showを使うことができます。それはうまく動作します。

Answer 2

はこれを試してみてください。

<figure class="daysearch-cover__image"> 
     <img src="fh.jpg" *ngIf="!showBirthdayTheme; else whatIfYes"> 
<ng-template #whatIfYes> 
     <img src="fhbt.jpg"> 
</ng-template> 
</figure> 

Answer 3

あなたのFB.loginとFB.api呼び出すには、通常の関数を使用しています。だからthis値は、クラスオブジェクトではなくクラスオブジェクトであることを示します。this.showBirthdayTheme = true;は、クラス変数を設定しません。そのようなコールバック

FB.login((response)=> {//here 
    console.log("inside FB.login"); 
    if(response.authResponse) { 
     FB.api('/me', 'GET', {fields: 'email, first_name, name, id, picture, birthday'}, (response)=>{//here 
     console.log("User's DOB:"+ response.birthday); 
     var birthDate = new Date(response.birthday+''); 
     var currentDate = new Date(); 
     birthDate.setFullYear(currentDate.getFullYear()); 
     if(birthDate < currentDate){ 
      birthDate.setFullYear(birthDate.getFullYear()+1); 
     } 
     var diff = birthDate.getTime()-currentDate.getTime(); 
     var days = Math.floor(diff/(1000*60*60*24)); 
     console.log("No of days left for "+response.name+"'s birthday :"+days); 

     //if birth month is with in coming 2 months 
     if(days < 40){ 
      console.log("setting theme"); 
      this.showBirthdayTheme = true; 
     } 
     console.log("showBirthdayTheme:" +this.showBirthdayTheme); 
     if(this.showBirthdayTheme){ 
      console.log("Birthday theme should be displayed"); 
     } 
     else{ 
      console.log("Default theme should be displayed"); 
     } 

     }); 
     //...