Angular 5中ngSwitch切换文本框/文本域及禁用状态异常问题

让我们一步步拆解并解决你遇到的两个问题：

问题1：ngSwitch始终显示文本域（textarea） #

这个问题大概率是类型不匹配或表达式报错导致的，我们逐一排查：

可能的原因及修复方案： #

• 类型不匹配：如果question.FormatType.Id是数字类型，你当前写的*ngSwitchCase="3121"会被Angular解析为字符串字面量，数字和字符串的严格比较会不相等，导致这个case永远无法匹配？不对，你说总是显示textarea，那反过来，如果你的Id是字符串类型，而ngSwitchCase用了数字，那应该走default显示input。所以先确保类型匹配：
  • 若Id是数字：把*ngSwitchCase="3121"改成[ngSwitchCase]="3121"（用方括号包裹，让Angular把它当成数字字面量）
  • 若Id是字符串：改成*ngSwitchCase="'3121'"（用单引号把3121包裹成字符串）
• 表达式可能报错：如果某个question的FormatType是undefined或null，直接访问question.FormatType.Id会抛出错误，导致ngSwitch无法正常工作，可能默认渲染第一个控件（也就是textarea）。解决这个问题可以用安全导航操作符：

  <div class="col-6" [ngSwitch]="question.FormatType?.Id">
  

  这样即使FormatType不存在，也不会报错，ngSwitch会用undefined作为匹配值。
• 检查属性名拼写：确认question.FormatType下的属性确实是Id（比如有没有可能是小写的id？），拼写错误也会导致匹配失败。

问题2：控件禁用状态异常 #

你遇到的禁用状态混乱，核心原因是重复的name属性：

在ngFor循环中，每个textarea和input都用了相同的name="questionField"，模板驱动表单中，name属性是控件的唯一标识，重复的name会导致Angular无法区分不同的控件，从而出现状态互相影响的问题。

修复方案： #

• 给每个控件设置唯一的name，比如结合question的唯一ID（假设question有Id属性）：

  <!-- textarea的name -->
  name="questionField-{{question.Id}}"
  <!-- input的name -->
  name="questionField-{{question.Id}}"
  

• 确保textarea显式设置[disabled]="true"，而input不需要额外设置[disabled]="false"（因为默认就是启用状态，除非你有其他动态控制逻辑）。

修复后的完整代码示例 #

<mat-card>
  <div class="row" *ngFor="let question of Questions">
    <div class="col-6">
      <p>{{question.Question}}</p>
    </div>
    <div class="col-6" [ngSwitch]="question.FormatType?.Id">
      <!-- 假设Id是数字类型，用[ngSwitchCase] -->
      <mat-form-field *ngSwitchCase="3121">
        <textarea 
          matInput 
          [(ngModel)]="question.Answer" 
          name="questionField-{{question.Id}}" 
          maxlength="1000" 
          [required]="RequiredFields" 
          [disabled]="true">
        </textarea>
      </mat-form-field>
      <mat-form-field *ngSwitchDefault>
        <input 
          type="text" 
          matInput 
          [required]="RequiredFields" 
          autocomplete="off" 
          [(ngModel)]="question.Answer" 
          name="questionField-{{question.Id}}" 
          maxlength="1000"/>
      </mat-form-field>
    </div>
  </div>
</mat-card>

试试上面的修改，应该能解决你的两个问题。如果还有异常，可以检查浏览器控制台的报错信息，这通常能帮你快速定位问题~

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