Item click event results not propogated, resolved

I have a list of rows with columns in the ion-content of a slider page.
i have a button in the slide page header that is either add a new row, or edit the selected row.

each element (ion-col) of each row (ion-row) has a (click) handler, which sets an internal variable with the row index of the selected row, and the button and selected [ngClass] for each row calls a function to get the state of the selected variable…

all works ok, except…

when I click, the getstate method is called for all objects on this page, THEN the click handler is called, and it CHANGES the state variable… so the presentation update is on the PRIOR state.

there is no event triggered to ‘refresh the view of the state variable’ AFTER the click.

here is a page in the slider

 <ion-slide class="theroot slide-zoom" width="100%" height="100%">
  <ion-toolbar >
  <ion-row>
    <ion-col col-1>
    <div>
	<button ion-button small clear icon-only (click)="addeditClicked(1,getselectedRow('image'),'image',{true:'add',false:'edit'}[getselectedRow('image')=='-1'])">
		<ion-icon [ios]="getselectedRow('image')=='-1' ? 'ios-add':'ios-search'" [md]="getselectedRow('image')=='-1' ? 'md-add':'md-search'"></ion-icon> 
	</button>				
	  </div>
		</ion-col>
		<ion-col col-10>Images</ion-col> 
	 </ion-row> 
  </ion-toolbar>
 <ion-toolbar > 
    <ion-row>	
	<ion-col col-3 class=" center">Name</ion-col>
	<ion-col col-3 class=" center">Tags</ion-col>
	<ion-col col-3 class=" center">Source</ion-col>
	<ion-col col-3 class=" center">Path</ion-col>
    </ion-row>							
</ion-toolbar>
								
 <ion-content>
<ion-row  *ngFor="let image of data.Images;let ii=index;" 					 
         (press)="deleterow(ii,'image')"
	 [ngClass]="{true:'selected',false:''}[ii === getselectedRow('image')]"
	 (dblTap)="addeditClicked(2, ii,'image','edit')"> 	
																																	
<ion-col  item-content col-3 class = "colb center " (click)="setClickedRow(ii,'image','Name')">{{image.Name}}</ion-col>	
<ion-col item-content col-3 class="colb center" (click)="setClickedRow(ii,'image','Tags')">
<!-- use an unordered list, with repeating line items to get array wrap -->
<ul style=" margin-top : 0;margin-bottom : 0;">				 
   <li *ngFor="let tag of image.Tags">{{tagfromID(tag)}}</li>							   
</ul>		
</ion-col>										
<ion-col item-content col-3 class = "colb center " (click)="setClickedRow(ii,'image','DataSource')"><ion-col>{{datasourcefromID(image.DataSource)}}</ion-col></ion-col>
 <ion-col item-content col-3 class = "colb path" (click)="setClickedRow(ii,'image','PathFromSource')">{{image.PathFromSource}}</ion-col>											 							
</ion-row>		
</ion-content>					
  </ion-slide>

getselectedrow(type) is

  getselectedRow(type){
	console.log("get selected returning "+this.selectedRow[type]+" type="+type);
	**return this.selectedRow[type];**
  }

setclickedrow(type, row index) is

  setClickedRow(index,type,column){      //function that sets the value of selectedRow to current index
			var i = this.selectedRow[type];
			console.log("clicked row="+type+" column="+column+" index="+index);
			switch(i)
			{	
				// click on row already selected
				case index:
					// deselect
					console.log("row "+type+" was previously selected");
					i=-1;
					break;
				// not selected		
				default:
					// make selected
					i=index;
					console.log("row "+type+" was NOT previously selected");
			}
		  this.selectedRow[type] = i;

the console.log trace for 2 consecutive clicks shows

[08:56:57]  console.log: get selected returning -1 type=viewer 
[08:56:57]  console.log: get selected returning -1 type=viewer 
[08:56:57]  console.log: get selected returning -1 type=datasource 
[08:56:57]  console.log: get selected returning -1 type=datasource 
[08:56:57]  console.log: get selected returning 0 type=image 
[08:56:57]  console.log: get selected returning 0 type=image 
[08:56:57]  console.log: get selected returning -1 type=tag 
[08:56:57]  console.log: get selected returning -1 type=tag 
[08:56:57]  console.log: get selected returning -1 type=viewer 
[08:56:57]  console.log: get selected returning -1 type=viewer 
[08:56:57]  console.log: get selected returning -1 type=viewer 
[08:56:57]  console.log: get selected returning -1 type=viewer 
[08:56:57]  console.log: get selected returning -1 type=viewer 
[08:56:57]  console.log: get selected returning -1 type=viewer 
[08:56:57]  console.log: get selected returning -1 type=viewer 
[08:56:57]  console.log: get selected returning -1 type=viewer 
[08:56:57]  console.log: get selected returning -1 type=viewer 
[08:56:57]  console.log: get selected returning -1 type=datasource 
[08:56:57]  console.log: get selected returning -1 type=datasource 
[08:56:57]  console.log: get selected returning -1 type=datasource 
[08:56:57]  console.log: get selected returning -1 type=datasource 
[08:56:57]  console.log: get selected returning -1 type=datasource 
[08:56:57]  console.log: get selected returning -1 type=datasource 
[08:56:57]  console.log: get selected returning -1 type=datasource 
[08:56:57]  console.log: get selected returning 0 type=image 
[08:56:57]  console.log: get selected returning 0 type=image 
[08:56:57]  console.log: get selected returning 0 type=image 
[08:56:57]  console.log: get selected returning 0 type=image 
[08:56:57]  console.log: get selected returning 0 type=image 
[08:56:57]  console.log: get selected returning 0 type=image 
[08:56:57]  console.log: get selected returning 0 type=image 
[08:56:57]  console.log: get selected returning 0 type=image 
[08:56:57]  console.log: get selected returning 0 type=image 
[08:56:57]  console.log: get selected returning 0 type=image 
[08:56:57]  console.log: get selected returning 0 type=image 
[08:56:57]  console.log: get selected returning 0 type=image 
[08:56:57]  console.log: get selected returning 0 type=image 
[08:56:57]  console.log: get selected returning 0 type=image 
[08:56:57]  console.log: get selected returning -1 type=viewer 
[08:56:57]  console.log: get selected returning -1 type=viewer 
[08:56:57]  console.log: get selected returning -1 type=datasource 
[08:56:57]  console.log: get selected returning -1 type=datasource 
[08:56:57]  console.log: get selected returning 0 type=image 
[08:56:57]  console.log: get selected returning 0 type=image 
[08:56:57]  console.log: get selected returning -1 type=tag 
[08:56:57]  console.log: get selected returning -1 type=tag 
[08:56:57]  console.log: get selected returning -1 type=viewer 
[08:56:57]  console.log: get selected returning -1 type=viewer 
[08:56:57]  console.log: get selected returning -1 type=viewer 
[08:56:57]  console.log: get selected returning -1 type=viewer 
[08:56:57]  console.log: get selected returning -1 type=viewer 
[08:56:57]  console.log: get selected returning -1 type=viewer 
[08:56:57]  console.log: get selected returning -1 type=viewer 
[08:56:57]  console.log: get selected returning -1 type=viewer 
[08:56:57]  console.log: get selected returning -1 type=viewer 
[08:56:57]  console.log: get selected returning -1 type=datasource 
[08:56:57]  console.log: get selected returning -1 type=datasource 
[08:56:57]  console.log: get selected returning -1 type=datasource 
[08:56:57]  console.log: get selected returning -1 type=datasource 
[08:56:57]  console.log: get selected returning -1 type=datasource 
[08:56:57]  console.log: get selected returning -1 type=datasource 
[08:56:57]  console.log: get selected returning -1 type=datasource 
[08:56:57]  console.log: get selected returning 0 type=image 
[08:56:57]  console.log: get selected returning 0 type=image 
[08:56:57]  console.log: get selected returning 0 type=image 
[08:56:57]  console.log: get selected returning 0 type=image 
[08:56:57]  console.log: get selected returning 0 type=image 
[08:56:57]  console.log: get selected returning 0 type=image 
[08:56:57]  console.log: get selected returning 0 type=image 
[08:56:57]  console.log: get selected returning 0 type=image 
[08:56:57]  console.log: get selected returning 0 type=image 
[08:56:57]  console.log: get selected returning 0 type=image 
[08:56:57]  console.log: get selected returning 0 type=image 
[08:56:57]  console.log: get selected returning 0 type=image 
[08:56:57]  console.log: get selected returning 0 type=image 
[08:56:57]  console.log: get selected returning 0 type=image 
[08:56:57]  console.log: clicked row=image column=DataSource index=0 
[08:56:57]  console.log: row image was previously selected 
[08:59:29]  console.log: get selected returning -1 type=viewer 
[08:59:29]  console.log: get selected returning -1 type=viewer 
[08:59:29]  console.log: get selected returning -1 type=datasource 
[08:59:29]  console.log: get selected returning -1 type=datasource 
[08:59:29]  console.log: get selected returning -1 type=image 
[08:59:29]  console.log: get selected returning -1 type=image 
[08:59:29]  console.log: get selected returning -1 type=tag 
[08:59:29]  console.log: get selected returning -1 type=tag 
[08:59:29]  console.log: get selected returning -1 type=viewer 
[08:59:29]  console.log: get selected returning -1 type=viewer 
[08:59:29]  console.log: get selected returning -1 type=viewer 
[08:59:29]  console.log: get selected returning -1 type=viewer 
[08:59:29]  console.log: get selected returning -1 type=viewer 
[08:59:29]  console.log: get selected returning -1 type=viewer 
[08:59:29]  console.log: get selected returning -1 type=viewer 
[08:59:29]  console.log: get selected returning -1 type=viewer 
[08:59:29]  console.log: get selected returning -1 type=viewer 
[08:59:29]  console.log: get selected returning -1 type=datasource 
[08:59:29]  console.log: get selected returning -1 type=datasource 
[08:59:29]  console.log: get selected returning -1 type=datasource 
[08:59:29]  console.log: get selected returning -1 type=datasource 
[08:59:29]  console.log: get selected returning -1 type=datasource 
[08:59:29]  console.log: get selected returning -1 type=datasource 
[08:59:29]  console.log: get selected returning -1 type=datasource 
[08:59:29]  console.log: get selected returning -1 type=image 
[08:59:29]  console.log: get selected returning -1 type=image 
[08:59:29]  console.log: get selected returning -1 type=image 
[08:59:29]  console.log: get selected returning -1 type=image 
[08:59:29]  console.log: get selected returning -1 type=image 
[08:59:29]  console.log: get selected returning -1 type=image 
[08:59:29]  console.log: get selected returning -1 type=image 
[08:59:29]  console.log: get selected returning -1 type=image 
[08:59:29]  console.log: get selected returning -1 type=image 
[08:59:29]  console.log: get selected returning -1 type=image 
[08:59:29]  console.log: get selected returning -1 type=image 
[08:59:29]  console.log: get selected returning -1 type=image 
[08:59:29]  console.log: get selected returning -1 type=image 
[08:59:29]  console.log: get selected returning -1 type=image 
[08:59:29]  console.log: get selected returning -1 type=viewer 
[08:59:29]  console.log: get selected returning -1 type=viewer 
[08:59:29]  console.log: get selected returning -1 type=datasource 
[08:59:29]  console.log: get selected returning -1 type=datasource 
[08:59:29]  console.log: get selected returning -1 type=image 
[08:59:29]  console.log: get selected returning -1 type=image 
[08:59:29]  console.log: get selected returning -1 type=tag 
[08:59:29]  console.log: get selected returning -1 type=tag 
[08:59:29]  console.log: get selected returning -1 type=viewer 
[08:59:29]  console.log: get selected returning -1 type=viewer 
[08:59:29]  console.log: get selected returning -1 type=viewer 
[08:59:29]  console.log: get selected returning -1 type=viewer 
[08:59:29]  console.log: get selected returning -1 type=viewer 
[08:59:29]  console.log: get selected returning -1 type=viewer 
[08:59:29]  console.log: get selected returning -1 type=viewer 
[08:59:29]  console.log: get selected returning -1 type=viewer 
[08:59:29]  console.log: get selected returning -1 type=viewer 
[08:59:29]  console.log: get selected returning -1 type=datasource 
[08:59:29]  console.log: get selected returning -1 type=datasource 
[08:59:29]  console.log: get selected returning -1 type=datasource 
[08:59:29]  console.log: get selected returning -1 type=datasource 
[08:59:29]  console.log: get selected returning -1 type=datasource 
[08:59:29]  console.log: get selected returning -1 type=datasource 
[08:59:29]  console.log: get selected returning -1 type=datasource 
[08:59:29]  console.log: get selected returning -1 type=image 
[08:59:29]  console.log: get selected returning -1 type=image 
[08:59:29]  console.log: get selected returning -1 type=image 
[08:59:29]  console.log: get selected returning -1 type=image 
[08:59:29]  console.log: get selected returning -1 type=image 
[08:59:29]  console.log: get selected returning -1 type=image 
[08:59:29]  console.log: get selected returning -1 type=image 
[08:59:29]  console.log: get selected returning -1 type=image 
[08:59:29]  console.log: get selected returning -1 type=image 
[08:59:29]  console.log: get selected returning -1 type=image 
[08:59:29]  console.log: get selected returning -1 type=image 
[08:59:29]  console.log: get selected returning -1 type=image 
[08:59:29]  console.log: get selected returning -1 type=image 
[08:59:29]  console.log: **get selected returning -1 type=image** <--- before click
[08:59:29]  console.log: clicked row=image column=DataSource index=0  <---- DataSource Column on row 0 clicked
[08:59:29]  console.log: row image was NOT previously selected <--- state changed 

but, now that the state is changed, we need to update the UI…
if I leave the slide page and return, the right status is displayed.

this also fails, if row 2 is selected and the user then selects row 3… row 2 should deselect, and row 3 should select, and the button should remain on ‘edit’

how can I trigger the ‘changed’ event to cause the ui to recheck the selected status (call getselectedrow())

another question I answer myself.

use NgZone to tell ionic the state changed

import into your page .ts

import {NgZone} from '@angular/core';

add onto your constructor

constructor(public navCtrl: NavController, public modalCtrl: ModalController,**private zone: NgZone**) {
  		

in the function where the state changes

          // wrap code making change in the zone run
			this.zone.run(() =>{
		 	 this.selectedRow[type] = i;
		  })