Angular中如何选择按钮？附模板代码示例

嘿，我来帮你搞定Angular里单选按钮的选择问题～看你已经用*ngFor生成了一组单选按钮，下面给你两种常用的实现方式，按需选择：

方法1：通过(change)事件手动获取选中值 #

你已经在模板里绑定了(change)="selectOnChange($event)"，只需要在组件类里实现这个方法就能拿到选中的值：

组件代码 #

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

@Component({
  // 替换为你的组件元数据（selector、templateUrl等）
})
export class YourComponent {
  library: string[] = ['React', 'Vue', 'Angular']; // 假设你的库数组是字符串类型
  selectedLibrary: string;

  selectOnChange(event: Event) {
    // 把事件目标转为HTMLInputElement，才能获取到value属性
    const radioInput = event.target as HTMLInputElement;
    this.selectedLibrary = radioInput.value;
    console.log('当前选中的库：', this.selectedLibrary);
  }
}

如果你的lib是对象类型（比如包含id和name的对象），直接用[value]绑定会把对象转为字符串[object Object]，这时候需要先把对象转成JSON字符串，在change事件里再解析回来：

<!-- 模板里修改value绑定 -->
<input type="radio" id="library-{{i}}" name="lib-books" (change)="selectOnChange($event)" [value]="JSON.stringify(lib)">

// 组件里的方法修改
selectOnChange(event: Event) {
  const radioInput = event.target as HTMLInputElement;
  this.selectedLibrary = JSON.parse(radioInput.value);
}

方法2：用[(ngModel)]双向绑定（更推荐） #

Angular的表单模块提供了双向绑定，能更优雅地处理单选按钮的选中状态，不用手动处理change事件：

步骤1：导入FormsModule #

首先要在你的模块（比如AppModule）里导入FormsModule，否则ngModel会报错：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // 导入这个模块

import { YourComponent } from './your-component.component';

@NgModule({
  imports: [BrowserModule, FormsModule], // 添加到imports数组
  declarations: [YourComponent],
  bootstrap: [YourComponent]
})
export class AppModule { }

步骤2：修改模板和组件 #

<div class="form-group">
  <ng-container *ngFor="let lib of library; let i=index">
    <div class="radio">
      <!-- 用[(ngModel)]绑定选中值，[value]绑定选项值 -->
      <input type="radio" id="library-{{i}}" name="lib-books" [(ngModel)]="selectedLibrary" [value]="lib">
      <label for="library-{{i}}"></label>
    </div>
    <label for="library-{{i}}">{{lib}}</label>
  </ng-container>
</div>

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

@Component({
  // 替换为你的组件元数据
})
export class YourComponent implements OnInit {
  library: string[] = ['React', 'Vue', 'Angular'];
  selectedLibrary: string;

  ngOnInit() {
    // 还可以在这里设置默认选中项，比如选中第一个
    if (this.library.length > 0) {
      this.selectedLibrary = this.library[0];
    }
  }
}

如果你的lib是对象类型，把[value]换成[ngValue]就能直接绑定对象：

<input type="radio" id="library-{{i}}" name="lib-books" [(ngModel)]="selectedLibrary" [ngValue]="lib">

组件里定义对应的类型：

interface Library {
  id: number;
  name: string;
}

export class YourComponent implements OnInit {
  library: Library[] = [{id:1, name:'React'}, {id:2, name:'Vue'}, {id:3, name:'Angular'}];
  selectedLibrary: Library;

  ngOnInit() {
    this.selectedLibrary = this.library[1]; // 默认选中Vue
  }
}

这样不管是获取选中值还是设置默认选中，都变得非常方便～

内容的提问来源于stack exchange，提问作者pele deco