Question

我是Angular 2中的新人。

我有这些单选按钮：

<input type="radio" name="jobb" value="Bonds">
<input type="radio" name="jobb" value="Income">

我想在myComponent类上调用一个类似这样的函数

<input type="radio" name="jobb" value="Bonds" (change)=doSomething()>

其中

doSomething(){
 console.log(`Hello`);
}

不调用这些函数。我也试过（点击）。但它不起作用

Answer 1

你可能错过了双引号。

（更改）= doSomething（）应该是（更改）=“doSomething（）”

在src / test-item-radio.ts中查看以下plunkr：

@Component({
selector: 'test-item-radio',
template: `
  <div>
    Answer: {{ answer }}
  </div>
  <div class="radio" *ng-for="#option of itemData">
        <label>{{option.id}}
            <input type="radio" [value]="option.id"
                   (change)="doSomething()" name="radio-list" [checked]='answer==option.id'>
            <span>{{ option.name }}</span>
        </label>
    </div>
`,
directives: [FORM_DIRECTIVES, NgFor],
providers: []
})
export class TestItemRadio {

@Input()
itemData;

answer: string;

constructor() {
  console.log(this.itemData);
  this.answer=2;
}

doSomething() {
  alert('hello');
}
}

http://plnkr.co/edit/F4ukpS2lExNJvb1CYwbF?p=info

Answer 2

将事件从（更改）更改为（单击）并将函数包含在双引号＆＃34; dosomething（）＆＃34;如下面的代码

传递一个单选按钮的值，以便在函数中区别于一个单选按钮，例如＆＃34; dosomething（＆＃39; Bonds＆＃39;）＆＃34;

如下面的代码

<input type="radio" name="jobb" value="Bonds" (click)="doSomething('Bonds')">
<input type="radio" name="jobb" value="Income" (click)="doSomething('Income')">

在组件类

中编写该函数

doSomething(value:string):void {
  alert(value);
}

我认为这应该有用

Answer 3

您可以通过$event.target.value作为doSomething函数的参数来获取无线电值，如下所示：

<input type="radio" name="jobb" value="Bonds" (change)="doSomething($event.target.value)">Bonds
<input type="radio" name="jobb" value="Income" (change)="doSomething($event.target.value)">Income

组件中的

功能：

doSomething(data: any){
  console.log('Hello ' + data);
}

您可以在https://plnkr.co/edit/MqUD0fGCUcF7brMEx1rq

处查看Plunker

Radio Button Angular 2

3 个答案: