Angular中如何根据选中ID获取对应IsBillable值？

假设有如下数据表：

Id , Name  , IsBillable
1    One       1
2    two       0
3    three     0

已通过GET请求将上述数据存储到masterData中，并使用masterData渲染下拉选项：

<mat-option *ngFor="let option of masterData" [value]="option.id">
    {{option.value}}
</mat-option>

表单配置如下：

const configControls = {
    'Id': [appointmentObj.Id, Validators.required],
    'IsBillable': [appointmentObj.isBillable, Validators.required],
}
this.appointmentForm = this.formBuilder.group(configControls);

当前可通过this.appointmentForm.get('Id').value获取选中的ID，但需要根据该ID获取对应的IsBillable值。尝试了如下循环对比逻辑但未生效：

var ApptId = this.appointmentForm.get('Id').value
var getAppId = this.masterData[0].id
for(getAppId = 0 ;getAppId <= ApptId;getAppId++){
  if(ApptId == getAppId){
   var billable = this.masterData [0].isBillable;
  }
}

请问有什么可行的逻辑可以实现这一需求？

1. 使用数组find方法（推荐） #

这是最简洁高效的方式，直接从masterData中匹配对应ID的条目，取出IsBillable值：

const selectedId = this.appointmentForm.get('Id').value;
const selectedItem = this.masterData.find(item => item.Id === selectedId);
// 确保找到对应条目后再取值，避免报错
const isBillable = selectedItem ? selectedItem.IsBillable : null;

注意：要保证masterData中条目的Id字段类型和selectedId一致（比如都是数字），避免类型不匹配导致匹配失败。

2. 修复原循环逻辑 #

你原来的循环存在多处逻辑错误：

• 循环变量初始化和重置逻辑混乱
• 匹配成功后始终取masterData[0]的IsBillable，而非对应条目
• 循环条件错误，应该遍历masterData的所有条目

修复后的循环写法：

const selectedId = this.appointmentForm.get('Id').value;
let isBillable = null;
for (let i = 0; i < this.masterData.length; i++) {
    if (this.masterData[i].Id === selectedId) {
        isBillable = this.masterData[i].IsBillable;
        break; // 找到匹配项后跳出循环，提升效率
    }
}

3. 使用forEach遍历 #

如果偏好forEach写法，可参考：

const selectedId = this.appointmentForm.get('Id').value;
let isBillable = null;
this.masterData.forEach(item => {
    if (item.Id === selectedId) {
        isBillable = item.IsBillable;
    }
});

额外优化：实时同步表单值 #

可以给下拉框绑定selectionChange事件，选中时自动同步IsBillable到表单，无需手动触发逻辑：

<mat-select formControlName="Id" (selectionChange)="onIdSelected($event)">
    <mat-option *ngFor="let option of masterData" [value]="option.Id">
        {{option.Name}} <!-- 原代码中{{option.value}}应为笔误，数据表中对应字段是Name -->
    </mat-option>
</mat-select>

对应组件方法：

onIdSelected(event: MatSelectChange) {
    const selectedItem = this.masterData.find(item => item.Id === event.value);
    if (selectedItem) {
        this.appointmentForm.get('IsBillable').setValue(selectedItem.IsBillable);
    }
}

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