*ngIf не работает должным образом
HTML
<figure class="daysearch-cover__image">
<img src="fh.jpg" *ngIf="!showBirthdayTheme">
<img src="fhbt.jpg" *ngIf="showBirthdayTheme">
</figure>Я регистрирую эту переменную showBirthdayTheme в консоли. Очевидно, что значение истинно, но вместо "fhbt.jpg" загружается "fh.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
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");
}
});
//...
Попробуй это:
<figure class="daysearch-cover__image">
<img src="fh.jpg" *ngIf="!showBirthdayTheme; else whatIfYes">
<ng-template #whatIfYes>
<img src="fhbt.jpg">
</ng-template>
</figure>
Я также столкнулся с той же проблемой. Не знаю причину. Но вы можете использовать ng-show вместо ng-if. Это отлично работает.