读取单选按钮值-Angular 2 [英] Reading radio button value - Angular 2

问题描述

我正在尝试读取单选按钮的值-角度2，

I'm trying to read the radio button value - in angular 2,

index.html

index.html

<input type="radio" id="options1" name="function" value="create">
<input type="radio" id="options2" name="function" value="continue">

index.ts

@Component({
    selector: 'function',
    templateUrl: './client/components/function/index.html',
    styleUrls: ['./client/components/function/index.css'],
    providers: [],
    directives: [ROUTER_DIRECTIVES]
})

我需要根据是否创建或继续单选按钮值在html中显示div.

I need to display a div in the html based on if radio button value is create or continue.

我尝试过的事情:

1. 使用document.getElementById获取打字稿文件中单选按钮的值-未检测到属性checked.
2. 通过在打字稿中定义model来使用model.function读取值.显然，无法访问model变量！
3. 尝试使用[(ngModel)]-也不起作用.

1. Fetching values of radio button in the typescript file using document.getElementById - Property checked wasn't getting detected.
2. Reading the value using model.function by defining a model in the typescript. Unable to access the model variable, obviously!
3. Tried using [(ngModel)] - that didn't work either.

请为此提出建议.

推荐答案

模板:

<input type="radio" id="options1" [(ngModel)]="myRadio" value="create">
<input type="radio" id="options2" [(ngModel)]="myRadio" value="continue">

然后在您的组件中定义一个myRadio变量并按如下所示对其进行初始化: myRadio: string = ''

then define a myRadio variable in your component and initialize it like this: myRadio: string = ''

此变量将获得选定的值.

this variable will get the chosen value.

并且请勿使用javascript来控制Angular2中的DOM元素，这违反了angular2哲学

and, do not use javascript to control DOM elements in Angular2, this is against the angular2 philosophy

这篇关于读取单选按钮值-Angular 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！