Angular12如何在HTML模板中显示formControlName对应的值

• 执行{{bill.get('heads')}}输出[object Object]，是因为AbstractControl.get()方法返回的是FormControl实例对象本身，而非控件绑定的值，直接插值会调用对象的toString方法，所以输出该结果。
• 编译时报空值错误，是Angular 12默认开启的严格模板类型检查导致的：get()方法的返回类型是AbstractControl | null，TS会判定直接访问.value存在空指针风险。

方案1：使用可选链操作符（推荐，代码最简） #

直接在模板中用?.安全访问，空值场景下会自动返回undefined，不会触发编译错误也不会运行时报错：

{{ bill.get('heads')?.value }}

如果需要空值时显示默认占位符，可以搭配空值合并运算符：

{{ bill.get('heads')?.value ?? '--' }}

方案2：直接访问FormGroup的value属性 #

循环中的bill本身是FormGroup实例，可以直接读取它的value对象下的对应字段，同样建议加可选链适配严格检查：

{{ bill.value?.heads }}

改后完整HTML示例 #

<div formArrayName="billings" *ngFor="let bill of billings.controls;  let i = index;">
    <div [formGroupName]="i">
      <div>
        <tr>
          <td>
            <!-- 直接输出heads控件的值 -->
            {{ bill.get('heads')?.value }}
            <input class="form-control" type="text" formControlName="heads">
          </td>
          <td>
            <input class="form-control" type="number" step=".01" formControlName="amount">
          </td>
        </tr>
      </div>
    </div>
  </div>
</form>

input绑定formControlName="heads"能正常工作，是因为Angular的FormControlName指令内部已经封装了空值安全校验、控件取值赋值的逻辑，不需要开发者额外处理。

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