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（（response）=＆gt; {

日志如下：

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

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

      });
       //...

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

我也面临同样的问题。不知道原因。但你可以使用ng-show而不是ng-if。这很好。

* ngIf无法正常工作

3 个答案: