Angular16中ng-select v11如何在HTML模板获取选中项的groupId

方法一：通过change事件缓存选中对象 #

在组件类中声明数组，存储每个表单项对应的选中对象：

selectedFields: any[] = [];

修改模板中的ng-select，添加change事件绑定，将选中的完整对象存入数组：

<ng-select formControlName="field"
           [items]="triggerFields"
           bindLabel="name"
           bindValue="id"
           groupBy="groupId"
           [clearable]="false"
           (change)="selectedFields[i] = $event">
</ng-select>

之后在模板中直接通过索引获取groupId：

{{ selectedFields[i]?.groupId }}

这种方式避免了模板中频繁执行查找操作，性能更优，逻辑也更清晰。

方法二：在组件中封装获取groupId的方法 #

在组件类中实现工具方法，根据fieldId查找对应的groupId：

getGroupId(fieldId: number): number | undefined {
  const field = this.triggerFields.find(x => x.id === fieldId);
  return field?.groupId;
}

如果triggerFields数据量较大，建议提前缓存映射关系，避免重复查找：

private groupIdMap: Map<number, number> = new Map();

ngOnInit(): void {
  this.triggerFields.forEach(field => {
    this.groupIdMap.set(field.id, field.groupId);
  });
}

getGroupId(fieldId: number): number | undefined {
  return this.groupIdMap.get(fieldId);
}

然后在模板中调用该方法：

{{ getGroupId(item.controls.field.value) }}

方法三：修正模板中的find表达式（不推荐） #

如果一定要在模板中直接使用find，需要替换非null断言为可选链，避免空值报错：

{{ triggerFields.find(x => x.id === item.controls.field.value)?.groupId }}

此方式在每次变更检测时都会执行find操作，数据量大或表单项较多时会影响性能，因此不推荐。

内容的提问来源于stack exchange，提问作者A. Gladkiy