Angular中如何将select选项的名称与值分别存储到不同字段？

当然有办法实现！你现在已经把选项的ID绑定到了siteuses.ORG_ID，要同时获取并存储对应的名称，有两种直观的方案，根据你的现有代码，我推荐第一种：

方案1：通过change事件监听选中项，手动赋值名称 #

这种方法不需要改动你现有的ngModel绑定逻辑，只需要给<select>添加一个change事件处理器，在选中项变化时找到对应的选项对象，提取名称并存储。

修改后的模板代码： #

<select 
  name="ORG_ID" 
  #ORG_ID="ngModel" 
  [(ngModel)]="siteuses.ORG_ID" 
  class="form-control" 
  [class.is-invalid]="!isValid && (siteuses.ORG_ID==''|| siteuses.ORG_ID==null)"
  (change)="onOrgSelected($event)"> <!-- 添加change事件 -->
  <option *ngFor="let item of this.sharedService.l_operating_units_s" value="{{item.BU_ID}}">
    {{item.NAME}}
  </option>
</select>

组件中的事件处理函数： #

在你的组件类中添加如下方法：

onOrgSelected(event: Event) {
  const selectedBuId = (event.target as HTMLSelectElement).value;
  // 从共享服务的数组中找到对应的选项对象
  const selectedOrg = this.sharedService.l_operating_units_s.find(item => item.BU_ID === selectedBuId);
  if (selectedOrg) {
    // 将名称存入你需要的字段，这里假设是siteuses.ORG_NAME，你可以改成自己的字段名
    this.siteuses.ORG_NAME = selectedOrg.NAME;
  }
}

方案2：绑定整个选项对象到ngModel #

如果你愿意调整现有的绑定逻辑，可以直接把<option>的value绑定为整个对象（Angular支持这种方式），这样ngModel会直接存储选中的完整对象，你可以从中同时获取ID和名称。

修改后的模板代码： #

<select 
  name="ORG_ID" 
  #ORG_ID="ngModel" 
  [(ngModel)]="siteuses.selectedOrg" <!-- 绑定到整个对象 -->
  class="form-control" 
  [class.is-invalid]="!isValid && (!siteuses.selectedOrg)">
  <!-- 使用[ngValue]绑定整个对象，而不是value -->
  <option *ngFor="let item of this.sharedService.l_operating_units_s" [ngValue]="item">
    {{item.NAME}}
  </option>
</select>

组件中使用： #

此时你可以直接从绑定的对象中获取ID和名称：

// 获取ID
this.siteuses.ORG_ID = this.siteuses.selectedOrg?.BU_ID;
// 获取名称
this.siteuses.ORG_NAME = this.siteuses.selectedOrg?.NAME;

两种方案都能满足你的需求，方案1更贴合你现在的代码结构，不需要大幅度改动；方案2则更简洁，逻辑更清晰，适合从头规划的场景。

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