I have a piece of code where I fetch data about a country as an observable. I then attempt to compare my string this.city with the this.capital that I got from the Observable. If they are not the same, I want to show a new paragraph in the HTML by changing the hidden boolean to false. Even though I am certain that this.city and the observable this.capital are not equal, the paragraph does not display on the HTML after calling showHeader(). I'm curious if it is possible to compare Observable data with strings in this manner?
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { SettingsPage } from '../../pages/settings/settings';
import { Storage } from '@ionic/storage';
import { CityDataProvider } from '../../providers/city-data/city-data';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
hidden: boolean = true;
hiddenTwo: boolean = true;
city: string;
cityData: any[];
capital: string;
cityLowerCase: string;
constructor(public navCtrl: NavController, private storage: Storage, private cdp: CityDataProvider) {
}
async ionViewWillEnter() {
const data = await this.storage.get("city")
.then((value) => {
if (value == null) { this.hidden = false; } else if (value !== null) { this.hidden = true; }
this.city = value;
})
.catch((error) => {
alert("Error accessing storage.")
})
this.cdp.getCityData(this.city).subscribe(data => {
this.cityData = data;
this.capital = data[0].capital.toString().toLowerCase();
this.cityLowerCase = this.city.toLowerCase();
this.showHeader(this.cityLowerCase, this.capital);
});
}
showHeader(a: string, b: string) {
if (a != b){
this.hiddenTwo = false;
}
}
openSettingsPage() {
this.navCtrl.push(SettingsPage);
};
}