Angular中用ngFor动态生成复选框时，如何显示Other对应的textarea

我来帮你搞定这个需求！你现在的核心问题是没法给ngFor循环里的"Other"复选框单独加模板引用变量，但其实完全可以通过响应式表单的控件状态来实现textarea的显示/隐藏，这才是Angular推荐的做法，比模板变量更可靠。

核心思路 #

不用纠结模板引用变量，我们直接监控"Other"对应的FormControl的值变化——当它被选中（值为true）时，就显示textarea。

具体修改步骤 #

1. 为FormArray和数据源添加Getter（方便模板访问）

在你的组件类里，添加几个getter方法，让模板能轻松访问到FormArray和目标数据：

// 获取health_care_goals这个FormArray
get healthCareGoalsArray(): FormArray {
  return this.goalsForm.get('health_care_goals') as FormArray;
}

// 把原来的private数组改成public，或者加getter让模板能访问
get healthCareGoalsData() {
  return this.health_care_goals;
}

// 获取"Other"对应的FormControl
get otherGoalControl(): FormControl {
  // 在FormArray里找到包含'other'控件的FormGroup
  const otherGroup = this.healthCareGoalsArray.controls.find(group => group.get('other')) as FormGroup;
  return otherGroup.get('other') as FormControl;
}

2. 修改模板代码

把原来的*ngIf条件换成监控otherGoalControl.value，同时调整ngFor的遍历对象（直接用FormArray的controls）：

<ul formArrayName="health_care_goals">
  <li class="form-group" *ngFor="let goalGroup of healthCareGoalsArray.controls; let i = index" [formGroupName]="i">
    <input 
      [id]="healthCareGoalsData[i].id" 
      type="checkbox" 
      [formControlName]="healthCareGoalsData[i].id"
    >
    <label [for]="healthCareGoalsData[i].id">
      <span></span>{{ healthCareGoalsData[i].name === 'Other' ? 'Other (Provide details here)' : healthCareGoalsData[i].name }}
    </label>
  </li>
</ul>

<!-- 当Other复选框被选中时显示textarea -->
<textarea 
  *ngIf="otherGoalControl.value" 
  formControlName="health_care_goals_response_other"
  placeholder="请输入详细信息..."
></textarea>

3. 调整原数组的访问权限

把你原来的private health_care_goals改成public，这样模板才能通过getter访问到它的数据：

public health_care_goals = [
  {name: 'Prolonging life', id: 'prolonging_life'},
  {name: 'Optimising functional independence', id: 'optimising_functional_independence'},
  {name: 'Optimising quality of life', id: 'optimising_quality_of_life'},
  {name: 'Achieving a peaceful death', id: 'achieving_a_peaceful_death'},
  {name: 'Symptom control', id: 'symptom_control'},
  {name: 'Maintaining good health and preventing illness', id: 'maintaining_good_health_and_preventing_illness'},
  {name: 'Other', id: 'other'}
];

为什么这个方案可行？ #

• 我们通过FormArray的controls找到对应"Other"的FormGroup，再获取它的FormControl，直接监控控件的选中状态
• 完全符合Angular响应式表单的设计思路，不需要依赖DOM层面的模板变量，避免了ngFor循环带来的变量作用域问题
• 代码更简洁，也更容易维护，后续如果目标数据有变化，不需要修改模板逻辑

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