选中 Angular 9 单选按钮

Angular 9 中的单选按钮是一种常用的表单元素，用于从一组互斥的选项中选择一个。本文将介绍如何在 Angular 9 中选中单选按钮。

步骤

1. 在组件中引入 FormsModule 模块。

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    FormsModule,
    // ...
  ],
})
export class AppModule { }

2. 在 HTML 模板文件中添加单选按钮元素。

<form>
  <div class="form-check">
    <label class="form-check-label">
      <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios1" value="option1" [(ngModel)]="selectedOption">
      Option 1
    </label>
  </div>
  <div class="form-check">
    <label class="form-check-label">
      <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2" value="option2" [(ngModel)]="selectedOption">
      Option 2
    </label>
  </div>
</form>

3. 在组件中定义 selectedOption 属性，用于存储当前选中的选项。

import { Component } from '@angular/core';

@Component({
  selector: 'app-radio-button',
  templateUrl: './radio-button.component.html',
  styleUrls: ['./radio-button.component.css']
})
export class RadioButtonComponent {
  selectedOption: string;
}

4. 运行程序并测试单选按钮是否能够正常工作。选中一个选项后，selectedOption 属性的值将会更新为当前选中的选项的值。

结论

本文介绍了在 Angular 9 中选中单选按钮的步骤。通过在组件中定义 selectedOption 属性，并使用 ngModel 双向绑定，在 HTML 模板中实现单选按钮的选中。