Displaying of image based from the if statement in typescript

Ionic Framework ionic-v3
1

I want to display on my html what should be the image based from my if statement.

On my Typescript:

styleArray = ["Solitary", "Visual","Auditory","Logical","Physical","Social","Verbal",];
constructor(){
for(var i=0; i <= this.styleArray.length -1 ; i++){
        if (this.arrayTest[0].style == this.styleArray[i]){
          this.styles = [
            { src: './assets/img/'+ this.styleArray[i] + '.png',
              button: this.styleArray[i] + 'InstructionPage()'},
          ];
         console.log("First: " + this.styleArray[i]);

        }
   }
}

On my HTML:

<ion-row>
       <ion-col width-25 >
                <ion-card class="card-5 full">
          <img class="list" src="{{this.styles.src}}" (click)="{{this.styles.button}}" />
        </ion-card>
      </ion-col>
    </ion-row>

For example:
I got is “Solitary” , it should display the image and its button on my view.
I’m having an error which is “src” & “button” undefined. - What am I doing wrong?

2

Parentheses are for outputs. Square brackets are for inputs.

(click)="nameOfClickHandlerFunction(parameter)"
[src]="variableContainingSourcePath"
3

The constructor makes no sense to me. You are looping over something that you don’t care about, because all the necessary information is apparently already in this.arrayTest[0] (which I have no idea how is populated). The button parameter also isn’t going to work as written. Instead, have a click handler that takes an $event parameter, and use that as a discriminator.