选择框输入查询字典值失败：无法获取公共API所需对应值

看起来你碰到的问题是选择框的取值方式不对，导致没法匹配字典里的键对吧？我来帮你梳理下问题所在和解决办法~

问题分析 #

你当前代码里用this.InpBox.toString()来获取选择框的选中值，但**toString()方法对于选择框元素（或框架组件实例）来说，返回的并不是你选中的选项文本**，它通常会返回类似[object HTMLSelectElement]这样的对象描述字符串，完全不是字典里的"Soccer"或"Football"这类键名，所以自然在字典中查不到对应值，控制台返回undefined。

解决方案 #

你需要根据选择框的类型（原生DOM元素或UI框架组件），用正确的方式获取选中的选项文本/值，以下是两种常见场景的处理方式：

1. 原生HTML <select> 元素

直接获取选中选项的文本或value属性：

public dictionary = { Soccer: "b134", Football: "c568" };
public optionsFn(): void {
  // 获取选中选项的文本（和字典键一致）
  this.correct = this.InpBox.options[this.InpBox.selectedIndex].text;
  
  // 如果你给<option>设置了value属性且和字典键一致，也可以用：
  // this.correct = this.InpBox.value;
  
  let test = this.dictionary[this.correct];
  console.log(this.correct, test); // 现在能输出正确的键和对应值了
}

2. UI框架组件（如Angular MatSelect、Vue Select等）

这类框架通常会提供更便捷的取值方式，比如双向绑定或事件传值：

// 假设用Angular的双向绑定，模板里写了 [(ngModel)]="selectedOption"
public dictionary = { Soccer: "b134", Football: "c568" };
public selectedOption: string;

public optionsFn(): void {
  this.correct = this.selectedOption;
  let test = this.dictionary[this.correct];
  console.log(this.correct, test);
}

// 或者通过选择事件获取值，模板里写 (selectionChange)="optionsFn($event)"
public optionsFn(event: any): void {
  this.correct = event.value;
  let test = this.dictionary[this.correct];
  console.log(this.correct, test);
}

额外注意 #

要确保this.correct的值和字典的键完全匹配（包括大小写、空格等），哪怕有一点差异也会导致返回undefined哦。

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