如何使用 Angular 中的反应形式获取选择选项下拉文本值

Question

我正在尝试将文本作为值访问。 目前我能够检索值但不能检索文本。

<select id="firstName" formControlName="firstName" class="form-control">
  <option value="Not Selected" [disabled]="true" [selected]="true">Select</option>
  <option *ngFor="let fName of clientFileData.worksheets[0].columns" value={{fName.index}}>{{fName.name}}</option>
</select>

使用this.firstName.value我可以获得fName.index的值，但我也想访问fName.name 。 如何检索$("#firstName:selected").text();等效值在 jquery 中？

Answer 1

我已经尝试过这段代码，它对我有用

<select id="firstName" formControlName="firstName" (change)="getName($event)"
 class="form-control">

并在 ts 文件中

getName(e:Event){
   const value:number =  parseInt((<HTMLSelectElement>event.srcElement).value);
   console.log((<HTMLSelectElement>event.srcElement.options[selectedIndex]text))
  }

让我知道你是否对你有用

Answer 2

为什么不用fName而不是 {{fName.index}} 绑定值？ 这样做会给你整个对象，然后你可以在其中找到 name 属性。 但是，在Angular您可以使用@ViewChild来实现类似于$("#firstName:selected").text();

Answer 3

我不确定一个简单的方法，但你可以有一个(change)事件，在这个事件中你使用fName.index遍历你的clientFileData数组并找到等效的名称。

Answer 4

简单的。 您需要浏览您正在呈现的选项列表，通过 id 找到选定的选项并从中获取文本。 这就是 HTML 选择的工作方式： I only give you id of the selected item, so, if you want its text then go figure it out yourself ，无论是 jquery 还是使用所选索引属性或其他东西的普通 javascript。 顺便说一句，我确信 jquery 在幕后做了类似的事情。

也可以将整个对象作为模型进行角度绑定，而不仅仅是它们的 id。 通过这种方式，您将能够直接从 select 绑定到的模型中获取文本。 但是，这将需要您提供自定义值访问器和一些其他的东西。 一开始可能听起来很可怕，但它不应该很复杂。

Answer 5

我刚刚找到了一个简单的解决方案，尽管它仅在选项列表不包含适用于我的情况的逗号时才有效。

<select id="firstName" formControlName="firstName" class="form-control">
  <option value="Not Selected" [disabled]="true" [selected]="true">Select</option>
  <option *ngFor="let fName of clientFileData.worksheets[0].columns" value={{fName.index}},{{fName.name}}>{{fName.name}}</option>
</select>

这将在字符串中返回带有名称的索引。 例如： "1,John Doe" 。

然后我们可以使用 split 方法操作逗号分隔的字符串。

console.log('Index: ' + this.firstName.value.split(',')[0]);
console.log('Name: ' + this.firstName.value.split(',')[1]);