Angular 2中如何根据选中状态为单选按钮添加title属性

嘿，我看到你在尝试给单选按钮根据选中/未选中状态动态添加title属性时遇到了麻烦，你的现有代码在属性绑定的语法和逻辑上都有点问题，让我帮你修正并给出可行的方案～

问题分析 #

你原来的代码错误地把[checked]绑定和title的逻辑混在了一起，而且Angular中动态绑定属性需要用正确的语法（比如[title]或[attr.title]），不能像你那样直接在模板里写格式错误的三元表达式。

方案一：使用ngModel管理选中状态（推荐） #

这种方式更符合Angular的表单处理规范，适合批量管理多个单选按钮的状态：

首先在组件类中定义一个变量来跟踪选中的单选按钮值：

// 组件.ts文件
selectedRadioId: number | undefined;

然后在模板中修改代码：

<input 
  id="radio{{i}}" 
  name="radio" 
  type="radio" 
  [(ngModel)]="selectedRadioId" 
  [value]="i"
  <!-- 根据选中状态动态设置title -->
  [title]="selectedRadioId === i ? 'tooltip=checked' : 'tooltip=unchecked'"
  tooltipPlacement="bottom"
>
<span class="radioLabel">
  <label class="custom-control-description" for="radio{{i}}">
    <!-- 这里可以添加你的单选按钮标签文本 -->
  </label>
</span>

方案二：使用模板引用变量直接获取状态 #

如果不需要在组件类中跟踪状态，也可以直接用模板引用变量获取单选按钮的checked属性：

<input 
  #radioBtn
  id="radio{{i}}" 
  name="radio" 
  type="radio"
  <!-- 直接根据按钮的checked状态设置title -->
  [title]="radioBtn.checked ? 'tooltip=checked' : 'tooltip=unchecked'"
  tooltipPlacement="bottom"
>
<span class="radioLabel">
  <label class="custom-control-description" for="radio{{i}}">
    <!-- 标签文本 -->
  </label>
</span>

关键说明 #

• 动态绑定title属性要用[title]（Angular支持直接绑定原生属性），如果是自定义属性才用[attr.xxx]；
• 单选按钮组要确保name属性一致，这样才能实现互斥选择；
• 方案一中的[(ngModel)]需要你在模块中导入FormsModule才能使用（在app.module.ts中导入并添加到imports数组）。

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