* ngIf工作不正常

Question

HTML

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

我登錄，在控制檯showBirthdayTheme變量。它明確表示價值是真的，但「fh.jpg」正在加載而不是「fhbt.jpg」。

我無法理解怎麼回事錯在這裏。

編輯：添加組件代碼 我很新的角度和親切糾正我，如果我做了什麼大錯。

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(function(response) { 

改變爲下面

的FB.login（（響應）=> {

日誌是如下：

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-show而不是ng-if。這工作正常。

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"); 
     } 

     }); 
     //...