Why does the Onclick event not work on my ion col?

Question

My onclick event does not work on a ion-col, it keeps saying, whatever method i call "is not defined at html element.onclick" my code snippet looks as follows

 <ion-row style="width:100%; height:6%; border: 1px solid #36B729; position:absolute; top:51.5%;"> <!-- Wall Tab --> <ion-col id="WallTab" style="height:100%; border: 1px solid #36B729" align="center" onClick="TabManagement(this.id)"> <font id="WallTab" style="color: #36B729; font-size: 70%;">Wall</font> </ion-col> <!-- Happy Customers Tab --> <ion-col id="HappyCustomersTab" style="height:100%; border: 1px solid #36B729" align="center" onClick="TabManagement(this.id)"> <font id="HappyCustomersTab" style="color: white; font-size: 70%;">Happy Customers</font> </ion-col> <!-- Reports Tab --> <ion-col id="UnhappyCustomersTab" style="height:100%; border: 1px solid #36B729" align="center" onClick="GoBack();"> <font id="UnhappyCustomersTab" style="color: white; font-size: 70%;">Unhappy Customers</font> </ion-col> </ion-row>

My ts file looks as follows

public class profile{

TabManagement(){

code...

} }

Answer 1

你应该只使用 (click)="GoBack()" 并尝试使用 (click)="TabManagement(id)" 没有this

Answer 2

You need to define the functions ie TabManagement and GoBack.

Now they are working fine, You can check by running the below code snippet.

 function TabManagement(tabId) { console.log(tabId) } function GoBack() { console.log("GoBack clicked") } 

 <ion-row style="width:100%; height:6%; border: 1px solid #36B729; position:absolute; top:51.5%;"> <!-- Wall Tab --> <ion-col id="WallTab" style="height:100%; border: 1px solid #36B729" align="center" onClick="TabManagement(this.id)"> <font id="WallTab" style="color: #36B729; font-size: 70%;">Wall</font> </ion-col> <!-- Happy Customers Tab --> <ion-col id="HappyCustomersTab" style="height:100%; border: 1px solid #36B729" align="center" onClick="TabManagement(this.id)"> <font id="HappyCustomersTab" style="color: white; font-size: 70%;">Happy Customers</font> </ion-col> <!-- Reports Tab --> <ion-col id="UnhappyCustomersTab" style="height:100%; border: 1px solid #36B729" align="center" onClick="GoBack();"> <font id="UnhappyCustomersTab" style="color: white; font-size: 70%;">Unhappy Customers</font> </ion-col> </ion-row>