閱讀單選按鈕值 - 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>