Angular UI多选项单选功能的简洁实现方式是什么？

核心思路是用单个状态变量存储选中标识+统一配置选项列表替代分散的布尔值和重复的点击方法，完全适配普通按钮和mat-card场景。

1. 组件TS逻辑改造 #

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 仅需一个变量存储当前选中项ID，无需维护多个独立布尔值
  selectedOptionId: string | null = null;

  // 统一配置所有选项，后续新增选项只需往数组追加配置即可
  options = [
    {
      id: 'btn1',
      label: '选项1',
      nextAction: () => console.log('执行选项1对应的Next操作')
    },
    {
      id: 'btn2',
      label: '选项2',
      nextAction: () => console.log('执行选项2对应的Next操作')
    },
    {
      id: 'btn3',
      label: '选项3',
      nextAction: () => console.log('执行选项3对应的Next操作')
    }
  ]

  // 通用点击处理方法，所有选项共用，无需单独编写每个按钮的点击逻辑
  onOptionClick(optionId: string) {
    this.selectedOptionId = optionId;
  }

  // Next按钮统一处理逻辑
  onNextClick() {
    if (!this.selectedOptionId) {
      // 可自行添加未选中提示逻辑
      return;
    }
    const currentOption = this.options.find(item => item.id === this.selectedOptionId);
    currentOption?.nextAction();
  }
}

2. 模板实现 #

普通按钮版本 #

<button 
  *ngFor="let option of options"
  (click)="onOptionClick(option.id)"
  [ngClass]="{'selected-style': selectedOptionId === option.id}"
>
  {{ option.label }}
</button>

<button (click)="onNextClick()">Next</button>

Angular Material mat-card 版本 #

逻辑完全一致，仅替换标签即可：

<mat-card
  *ngFor="let option of options"
  (click)="onOptionClick(option.id)"
  [ngClass]="{'selected-card-style': selectedOptionId === option.id}"
>
  <mat-card-content>{{ option.label }}</mat-card-content>
</mat-card>

<button mat-raised-button (click)="onNextClick()">Next</button>

方案优势 #

• 无重复代码，新增选项仅需在options数组添加配置，无需新增点击方法、布尔变量
• 逻辑集中维护，所有选项的配置、后续操作统一管理，排查问题效率更高
• 模板简洁，通过*ngFor批量渲染元素，无需重复编写多个按钮/card标签

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