阅读单选按钮值 - Angular 2

Question

我正在尝试读取单选按钮值 - 以角度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]
})

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

我尝试过的：

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

请为此建议一个转机。

Answer 1

模板：

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

然后在组件中定义myRadio变量并将其初始化为： myRadio: string = ''

此变量将获得所选值。

并且， 不要使用javascript来控制Angular2中的DOM元素，这是针对angular2哲学的

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>