如何获取Angular下拉框选中项对应的IsBillable值

针对你遇到的下拉框选中ID后无法获取对应IsBillable值的问题，可通过以下两种方式解决：

方式一：绑定完整对象到下拉选项 #

直接将整个选项对象绑定到mat-option的value属性，选中后就能拿到包含IsBillable的完整数据：

1. 修改下拉框代码：

<mat-option *ngFor="let option of masterAppointmentTypes" [value]="option">
  {{option.Name}} <!-- 原代码的option.value需改为对应数据里的Name字段 -->
</mat-option>

2. 调整表单与判断逻辑：
   表单的AppointmentTypeID字段将存储完整选项对象，后续直接从对象中提取IsBillable：

// 表单构建（若无需初始绑定isBillable，可设为null）
const configControls = {
  'AppointmentTypeID': [appointmentObj.appointmentTypeID, Validators.required],
  'IsBillable': [null, Validators.required]
}
this.appointmentForm = this.formBuilder.group(configControls);

// 修改判断逻辑
const selectedOption = this.appointmentForm.get('AppointmentTypeID').value;
if (selectedOption && selectedOption.IsBillable) {
  this.openPaymentDialog(appointmentData, queryParams);
} else {
  this.createAppointment(appointmentData, queryParams);
}

方式二：监听下拉选择事件更新IsBillable #

若仍想保留绑定ID的下拉框设置，可监听选择事件，根据选中ID匹配对应IsBillable并更新表单：

1. 给下拉框添加事件监听：

<mat-select formControlName="AppointmentTypeID" (selectionChange)="onAppointmentTypeChange($event)">
  <mat-option *ngFor="let option of masterAppointmentTypes" [value]="option.Id">
    {{option.Name}}
  </mat-option>
</mat-select>

2. 添加事件处理方法：

onAppointmentTypeChange(event: MatSelectChange) {
  const selectedId = event.value;
  // 从数据源匹配对应选项
  const selectedOption = this.masterAppointmentTypes.find(item => item.Id === selectedId);
  if (selectedOption) {
    // 更新表单的IsBillable字段
    this.appointmentForm.patchValue({
      IsBillable: selectedOption.IsBillable
    });
  }
}

3. 修正无效判断逻辑：
   原逻辑中this.appointmentForm.get('id').value == this.appointmentForm.get('id').value是恒成立的无效判断，直接检查表单IsBillable值即可：

if (this.appointmentForm.get('IsBillable').value) {
  this.openPaymentDialog(appointmentData, queryParams);
} else {
  this.createAppointment(appointmentData, queryParams);
}

额外注意点 #

• 确保数据源masterAppointmentTypes的字段名与给定数据一致（注意Id、Name、IsBillable的大小写）；
• 原下拉框代码中的{{option.value}}需改为{{option.Name}}才能正确显示选项名称。

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