ボタンの値が渡されたときに未定義です

Question

私のボタンの値を、その時点でその値を記録する関数に渡そうとしています。この関数は、私のwelcome.tsファイルにインポートされる関数クラスにあります。 のwelcome.html

<ion-content padding id="page1"> 
<h1 id="welcome-heading4" style="color:#000000;text-align:center;"> 
Question-CF 
</h1> 
<div class="spacer" style="width:320px;height:427px;" id="welcome-spacer1"></div> 
<button value='0' (click)=barrierClick(this.value) id="welcome-button1" ion-button color="positive" block style="font-weight:500;border-radius:50px 50px 50px 50px;"> 
Begin 
</button> 
</ion-content> 

Welcome.ts

import { Component } from '@angular/core'; 
import { NavController, IonicPage, NavParams } from 'ionic-angular'; 
import {functions} from '../functions'; 
import {BarriersQ1Page} from '../barriers-q1/barriers-q1'; 


@Component({ 
selector: 'page-welcome', 
templateUrl: 'welcome.html' 
}) 

export class WelcomePage { 
nextPage = BarriersQ1Page; 



barrierClick(val){ 

functions.barrierClick(val); 
} 




constructor(public navCtrl: NavController) { 

} 


} 

Functions.ts

export class functions 
{ 
public static barrierClick(val: string) 
{ 
console.log(val); 

} 

} 

現在、コンソールログは未定義と私はそれがログに記録したいですボタンの値は現在「0」です。

Answer 1

htmlには、thisという参照はありません。 あなたはこれがボタンの値を含むすべての情報が含まれています

(click) = barrierClick($event) 

、関数のように全体clickイベントを渡すことができます。私は** ** event.currentTarget.valueにそれを変更したとき

そして、あなたのtsファイルで、

barrierClick(event) { 
    functions.barrierClick(event.target.value); // Should pass button's value to functions.barrierClick 
}