Angular 12中如何通过点击按钮触发对应radio button选中

你只需要调整两处代码即可实现需求，原有HTML模板代码无需修改：

• 首先确认当前组件所属的NgModule已经导入FormsModule，[(ngModel)]双向绑定依赖该模块才能正常运行，模块示例代码如下：

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

import { AppComponent } from './app.component';
import { RadiosComponent } from './radios/radios.component';

@NgModule({
  declarations: [
    AppComponent,
    RadiosComponent
  ],
  imports: [
    BrowserModule,
    FormsModule // 加入到imports数组中
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

• 然后在radios.component.ts中声明模板绑定的myFood变量，同时实现checkit方法即可：

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

@Component({
  selector: 'app-radios',
  templateUrl: './radios.component.html',
  styleUrls: ['./radios.component.css']
})
export class RadiosComponent implements OnInit {
  // 声明和模板双向绑定的变量
  myFood: string = '';

  constructor() { }

  ngOnInit(): void {
  }

  // 实现按钮点击触发方法
  checkit(foodType: string): void {
    this.myFood = foodType;
  }
}

实现原理：单选组通过[(ngModel)]和myFood双向绑定后，只要myFood的值和某个单选框的value匹配，Angular会自动将该单选框置为选中状态，无需手动操作DOM。

内容的提问来源于stack exchange，提问作者Smart Code