Dynamically pass parameters into functions directly from the view


#1

I have an array of data inside the variable “data” that i’m iterating through in the view, i’m basically printing a series of pictures and i want to be able to click on them and trigger the “showFullScreenImage()” function that in turn opens the hd version of the picture in full screen.

data contains some stuff, a normal quality url that i use as src for the img tag and an hdurl that i want to send as parameter to the function.

I can’t of course use the double curly brackets like this. What’s the proper way to deal with this?

home.html

<ion-content padding>
  <ion-card padding *ngFor="let i of data">

    <img (click)="showFullScreenImage({{ i?.hdurl }})" class="stile-immagine" src="{{ i?.url }}"/>

  </ion-card>
</ion-content>

home.ts

    showFullScreenImage(HdUrl){
        this.photoViewer.show(HdUrl);
    }

#2

showFullScreenImage(i.hdurl). Deal with the work the Elvis operator is doing in the controller instead.


#4

The main reason why i still use the Elvis operator is because Ionic’s behaviour seems random at times.

I tried most of the suggestions you guys gave me here but sometimes the error keeps popping up. It looks like the view is faster than the data, but just sometimes.

[SOLVED] Ionic 3 and Angular 4 - Uncaught (in promise): TypeError: Cannot read property 'title' of undefined


#5

That is known as a race condition. You must program defensively, so that all properties referenced by templates are always in a sane and usable state.


#6

Yeah, that’s fundamental to web programming. Personally, I usually display Observables on pages, not “regular” objects. That way, the page renders immediately, and the Observables fill in as they arrive from the stream.