Angular 18中如何在ngModel双向绑定中使用可选链？

问题场景 #

我有一个公共共享服务，里面存储了嵌套结构的公共变量，需要在HTML中通过ngModel双向绑定访问并更新其值。但嵌套对象可能为null或undefined，尝试使用可选链时，双向绑定[(ngModel)]不支持可选链会直接报错。

报错的双向绑定写法 #

<select
  class="form-select"
  name="font-size"
  id="fontSize"
  [(ngModel)]="cmServ.settingsData?.styles?.[elemId]"
>
  <!-- elemId可能为null或undefined，且无法在TS中设置默认值，否则会破坏应用流程 -->
  <option [value]="''">Select</option>
  @for(size of fontSize; track size){
     <option [value]="size">{{size}}</option>
  }
</select>

拆分双向绑定后的可行写法 #

<select
  class="form-select"
  name="font-size"
  id="fontSize"
  [ngModel]="cmServ.settingsData?.styles?.[elemId]"
  (ngModelChange)="cmServ.settingsData.styles[elemId] = $event"
>
  <option [value]="''">Select</option>
  @for(size of fontSize; track size){
     <option [value]="size">{{size}}</option>
  }
</select>

移除elemId可选链后的半兼容写法 #

仅首次elemId为空时不报错，后续仍可能触发异常：

<select
  class="form-select"
  name="font-size"
  id="fontSize"
  [(ngModel)]="cmServ.settingsData?.styles[elemId]"
>
  <option [value]="''">Select</option>
  @for(size of fontSize; track size){
     <option [value]="size">{{size}}</option>
  }
</select>

补充场景：应用中elemId会被其他组件设为null或空字符串以重置字段，需兼容该逻辑。

需求：如何在ngModel中实现空值检查，同时不破坏原有应用流程？

解决方案 #

1. 拆分双向绑定并添加安全校验 #

这是最直接的适配方式，将[(ngModel)]拆分为单向绑定[ngModel]和变更事件(ngModelChange)，在事件回调中加入空值判断，避免无效赋值：

<select
  class="form-select"
  name="font-size"
  id="fontSize"
  [ngModel]="cmServ.settingsData?.styles?.[elemId]"
  (ngModelChange)="updateStyleValue($event)"
>
  <option [value]="''">Select</option>
  @for(size of fontSize; track size){
     <option [value]="size">{{size}}</option>
  }
</select>

组件TS中实现校验逻辑：

updateStyleValue(value: string) {
  // 校验settingsData、styles、elemId的有效性，仅在全部合法时赋值
  if (this.cmServ.settingsData?.styles && this.elemId) {
    this.cmServ.settingsData.styles[this.elemId] = value;
  }
  // elemId为空时自动跳过赋值，实现字段重置效果
}

2. 用Getter/Setter封装变量访问 #

在组件中封装一个属性，将嵌套对象的安全访问逻辑隐藏在TS层，HTML中直接绑定该属性即可使用双向绑定语法：

// 组件TS代码
get currentStyleValue(): string | undefined {
  return this.cmServ.settingsData?.styles?.[this.elemId];
}

set currentStyleValue(value: string) {
  if (this.cmServ.settingsData?.styles && this.elemId) {
    this.cmServ.settingsData.styles[this.elemId] = value;
  }
}

HTML中直接绑定封装后的属性：

<select
  class="form-select"
  name="font-size"
  id="fontSize"
  [(ngModel)]="currentStyleValue"
>
  <option [value]="''">Select</option>
  @for(size of fontSize; track size){
     <option [value]="size">{{size}}</option>
  }
</select>

3. 扩展公共服务统一处理安全赋值 #

如果多个组件都有类似需求，可在公共服务中添加统一的安全更新/读取方法，集中处理空值逻辑：

// 公共服务TS代码
updateStyle(elemId: string | null, value: string) {
  if (this.settingsData?.styles && elemId) {
    this.settingsData.styles[elemId] = value;
  }
}

getStyle(elemId: string | null): string | undefined {
  return this.settingsData?.styles?.[elemId];
}

HTML中调用服务方法实现绑定：

<select
  class="form-select"
  name="font-size"
  id="fontSize"
  [ngModel]="cmServ.getStyle(elemId)"
  (ngModelChange)="cmServ.updateStyle(elemId, $event)"
>
  <option [value]="''">Select</option>
  @for(size of fontSize; track size){
     <option [value]="size">{{size}}</option>
  }
</select>

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