I need to dynamically display images on my HTML based on specific conditions using TypeScript.
In my TypeScript file:
styleArray = ["Solitary", "Visual","Auditory","Logical","Physical","Social","Verbal",];
constructor(){
for (var i = 0; this.styleArray && i <= this.styleArray.length - 1; i++) {
if (this.arrayTest[0].style == this.styleArray[i]) {
this.styles = [
{
src: './assets/img/' + this.arrayTest[0].style + '.png',
/* button: this.styleArray[i] + 'InstructionPage', */
button: 2
}
];
console.log("First: " + this.styleArray[i]);
}
}
for(var i=0; this.styleArray && i <= this.styleArray.length -1 ; i++){
if (this.arrayTest[1].style == this.styleArray[i]){
this.styles = [
{ src: './assets/img/'+ this.styleArray[i] + '.png',
button:3
}
];
console.log("Second: " +this.styleArray[i]);
}
}
// Repeat similar logic for other array items
}
In my HTML template:
<ion-row>
<ion-col width-25>
<ion-card class="card-5 full">
<img class="list" [src]="styles[0].src" (click)="commonMethod(styles[0].button)" />
</ion-card>
</ion-col>
</ion-row>
// Repeat similar structure for displaying other image elements
For example: The displayed images should be sorted from highest priority to lowest on the HTML view.
If you encounter an error stating that "src" or "button" is undefined, there might be an issue with how the styles and buttons are being assigned in the TypeScript logic implementation. Check the variable assignments and condition checks to ensure they are correctly assigning values to src and button properties.