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。

我尝试过的事情：

使用document.getElementById在打字稿文件中获取单选按钮的值 - 未检测到属性checked。
通过在打字稿中定义model.function，使用model读取值。显然无法访问model变量！
尝试使用[(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>

阅读单选按钮值 - Angular 2

2 个答案: