如何使用 Angular 18 在 ngModel 中实现可选链接

Question

我的项目中有一个场景，一个公共共享服务具有一个公共变量（对象）来存储嵌套对象。我必须使用 NgModel 访问并更新其在 html 中的值。可选链接应用于嵌套对象以访问和更新值，因为它可以为 null 或未定义，但可选链接会给出双向绑定不支持的错误。

 <select
    class="form-select"
    name="font-size"
    id="fontSize"
    [(ngModel)]="cmServ.settingsData?.styles?.[elemId]"
  >
<!-- Here 'elemId' can be null or undefined. And I can't set the 'default' value in ts as it will break the flow of my application.  -->
    <option [value]="''">Select</option>

    @for(size of fontSize; track size){
       <option [value]="size">{{size}}</option>
    }
  </select>

我已经删除了“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>

这里是虚拟申请的链接：
https://stackblitz.com/edit/stackblitz-starters-t5esi6?file=src%2Fmain.html

还要考虑的情况：在我的应用程序中，“elemId”也从远端/主页组件设置为 null 或空字符串以重置字段。

我应该如何在 ngModel 中应用可选链，这样我的应用程序也不会中断并检查也已应用。

Answer 1

我建议将所有内容简单地包装在 if 条件中。从角度 17 开始，这是理所当然的。

@if(cmServ.settingsData?.styles?.[elemId]; as styleModel) {
<select
    class="form-select"
    name="font-size"
    id="fontSize"
    [(ngModel)]="styleModel"
  >
    <!-- .. other code .. -->
  </select>
}

代码说：“如果链是真的，则渲染，如果是，则将值放入

styleModel

。将

styleModel

作为我渲染的

model

组件的

select

。

它符合您的要求，但也通过明确您的意图来增强可读性。