读取单选按钮的值 - Angular 2

Question

我将尝试读取单选按钮的值 - 在Angular 2中，

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]
})

我需要根据单选按钮的值（create或continue）在html中显示一个div。

我尝试过以下方法：

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

请建议解决此问题的方法。

- Ramana Sarva

Answer 1

模板：

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

然后在您的组件中定义一个myRadio变量，并像这样初始化它：myRadio: string = ''

此变量将获得所选值。

另外，在Angular2中不要使用JavaScript来控制DOM元素，这与Angular2的理念相违背。

- Motassem Kassab

---

我按照建议尝试了，但是出现了一个HTML错误，显示“无法读取未定义的属性'value'”。另外，请建议如何在Angular 2中完成此操作，如果不应该使用Javascript修改DOM元素。 - Ramana Sarva

你只需要在组件的构造函数中初始化变量： myRadio: string = '' - Motassem Kassab

我的电台：字符串 = '创建' - Motassem Kassab

Angular 2很棒。与老式的JavaScript相比，我不需要做太多编码工作。 - arn-arn

Answer 2

如果你只有2或3个单选框选项，最简单的选择是使用模板引用变量，如下所示：

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

<button (click)="fn(op1.checked ? op1.value : op2.checked ? op2.value)">Run</button>

- ttfreeman