Angular mat-form-field的[(ngModel)]绑定null报错且Elvis运算符无效怎么办

报错根本原因 #

你遇到的报错是因为双向绑定语法[(ngModel)]不支持直接在赋值目标中使用可选链（Elvis运算符）：[(ngModel)]等价于同时做[ngModel]属性输入和(ngModelChange)事件输出，事件触发时需要给绑定的路径赋值，当exampleObj.obj为null时，exampleObj.obj.id的赋值操作会直接抛出错误，这也是可选链在此场景下不生效的核心原因。

可行解决方案 #

方案1：拆分双向绑定（推荐，无需修改原有数据结构）

把双向绑定拆为独立的属性输入和事件回调，输入侧用可选链处理空值，回调侧自行处理空对象初始化逻辑：

模板代码：

<mat-form-field appearance="legacy">
  <mat-label>LOCATION</mat-label>
  <mat-select 
    name="obj"  
    [ngModel]="exampleObj.obj?.id" 
    (ngModelChange)="handleLocationChange($event)"
  >
    <ng-container *ngFor="let obj of objs">
      <mat-option [value]="obj.id">
        {{obj.location}}
      </mat-option>
    </ng-container>
  </mat-select>
</mat-form-field>

组件TS代码：

// 注意把此处的ObjType替换为你实际的obj对象类型
handleLocationChange(newId: number | null): void {
  // 父级对象为空时先初始化再赋值
  if (!this.exampleObj.obj) {
    this.exampleObj.obj = {} as ObjType;
  }
  this.exampleObj.obj.id = newId;
}

该方案下exampleObj.obj为null时，输入侧的可选链会返回undefined，mat-select无匹配值就会保持空白，完全符合你的需求。

方案2：初始化时预设空对象（改动最小）

如果你的业务逻辑允许在组件初始化阶段给exampleObj.obj预设一个空对象，可以直接在组件初始化逻辑中补充非空判断，无需修改模板代码：

ngOnInit(): void {
  if (!this.exampleObj.obj) {
    // 注意把此处的ObjType替换为你实际的obj对象类型
    this.exampleObj.obj = {} as ObjType;
  }
}

此时exampleObj.obj.id默认是undefined，原有模板的双向绑定不会报错，mat-select也会保持空白状态。

内容的提问来源于stack exchange，提问作者Hello Mr Mustafo