Global Variable?

Ionic Framework ionic-v3
1

Hello,

If I change the value of the global variable “image” during runtime (Via clicking the button), I get the following error:

Runtime Error
image is not defined
Stack
ReferenceError: image is not defined
at HomePage.webpackJsonp.194.HomePage.openFirstPage (http://localhost:8100/build/main.js:69:15)
at Object.eval [as handleEvent] (ng:///AppModule/HomePage.ngfactory.js:32:31)
at handleEvent (http://localhost:8100/build/vendor.js:13608:172)
at callWithDebugContext (http://localhost:8100/build/vendor.js:15093:42)
at Object.debugHandleEvent [as handleEvent] (http://localhost:8100/build/vendor.js:14680:12)
at dispatchEvent (http://localhost:8100/build/vendor.js:10057:25)
at http://localhost:8100/build/vendor.js:10671:38
at HTMLButtonElement. (http://localhost:8100/build/vendor.js:36353:53)
at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15660)
at Object.onInvokeTask (http://localhost:8100/build/vendor.js:4973:33)

My source code is as follows:

home.ts:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { FirstPage } from '../first/first';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

 image = "../../assets/imgs/IMG3.jpg";
  constructor(public navCtrl: NavController) {

  }

  openFirstPage(){
  	image = "../../assets/imgs/IMG4.jpg";
  	console.log('click')

  }

}

home.html:

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  The world is your oyster!
  <button ion-button full color="light" (click)="openFirstPage()">ClickMe</button>
<ion-list>
  <ion-item>
    <ion-avatar item-start>
     <img src = {{image}}>
    </ion-avatar>
    <h2>Cher</h2>
    <p>Ugh. As if.</p>
  </ion-item>
</ion-list>
</ion-content>

Any suggestions what I am doing wrong? Please note that at the start the variable seems to exist and no error is thrown.

Thanks in advance
Tobias

2

Don’t use global variables. If you want to store an image source across pages, put it in a provider.

3

Is home.html and home.ts considered a different page!? Thought these two files belong “together”.

Anyway I created a provider according to the video: https://www.youtube.com/watch?v=ARkSm0KWHaE
and it works. Not sure why it didn’t work with the inital solution though. Any idea?

4

They’d be considered the same page, and thus not a global variable yes.

The solution to the original way is to change
image = "../../assets/imgs/IMG4.jpg";

In openFirstPage to this.image = ...

1 Like