Angular 2默认选中单选按钮

typescript

# Angular 2中如何默认选中单选按钮

在Angular 2中，处理单选按钮的选中状态是一个常见的任务，特别是当我们希望在页面加载时就为某个单选按钮设置默认选中状态。本文将介绍如何通过Angular 2框架实现这一功能，并提供相应的案例代码。

## 单选按钮简介

单选按钮是一组选项中的一种，用户只能选择其中的一个。在Angular 2中，我们可以使用[(ngModel)]指令来实现双向数据绑定，以便轻松管理单选按钮的选中状态。

## 设置默认选中状态

要在Angular 2中默认选中单选按钮，我们可以使用[checked]属性来设置初始状态。这可以通过在组件的初始值中设置相应的属性来实现。

以下是一个简单的Angular组件示例，其中包含一个单选按钮组，并在组件加载时将其中一个按钮设为默认选中状态：

typescript
// app.component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: <code>
    <div>
      <strong>单选按钮组：</strong>
      <label>
        <input type="radio" [checked]="firstOption" (change)="onRadioChange(true)"> 选项1
      </label>
      <label>
        <input type="radio" [checked]="!firstOption" (change)="onRadioChange(false)"> 选项2
      </label>
    </div>
  </code>,
  styleUrls: ['./app.component.CSS']
})
export class AppComponent {
  firstOption = true;
  onRadioChange(isFirstOption: boolean) {
    this.firstOption = isFirstOption;
  }
}

在上述代码中，我们使用了[checked]属性来动态设置单选按钮的选中状态。初始时，firstOption属性被设置为true，因此第一个单选按钮会被默认选中。通过onRadioChange方法，我们监听单选按钮的变化，并更新firstOption属性，以确保选中状态的同步更新。

##

通过使用Angular 2的数据绑定和属性绑定机制，我们可以轻松地实现单选按钮的默认选中状态。以上示例提供了一个简单的指导，可供您在自己的项目中使用。希望本文对您在Angular 2中处理单选按钮有所帮助。