Angular中如何获取select标签选中值并更新component.ts文件变量

问题原因 #

你当前的实现没有触发函数是因为原生<option>元素的点击事件在绝大多数浏览器中不会被触发，这是浏览器对下拉选择控件的默认行为限制，不是Angular的问题。

正确实现方案 #

你应该把事件绑定到<select>元素的(change)事件上，有两种常用实现方式：

方案1：直接通过change事件取值

修改component.html代码：

<p>How many words will you be using?</p>
<!-- 给select绑定change事件，通过$event.target.value拿到选中值 -->
<select (change)="updateInputBoxes($event.target.value)">
    <option *ngFor="let num of wordCount" [value]="num">{{num}}</option>
</select>

<!-- 补充：渲染对应数量的输入框示例 -->
<div *ngFor="let i of [].constructor(inputBoxes); let idx = index">
  输入框{{idx+1}}：<input type="text">
</div>

修改component.ts里的updateInputBoxes方法，把拿到的字符串转成数字：

public wordCount: Array<number> = [1,2,3,4,5];
public inputBoxes: number = 0; // 建议给初始值避免渲染报错
constructor() { }
ngOnInit(): void {
}
updateInputBoxes(num: string) {
  this.inputBoxes = Number(num);
}

方案2：使用ngModel双向绑定（更简洁，适合表单场景）

首先需要在你的模块文件（通常是app.module.ts）里导入FormsModule：

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // ...其他已有导入
    FormsModule
  ]
})

然后修改component.html：

<p>How many words will you be using?</p>
<select [(ngModel)]="inputBoxes">
    <option *ngFor="let num of wordCount" [ngValue]="num">{{num}}</option>
</select>

<!-- 渲染输入框示例同上 -->
<div *ngFor="let i of [].constructor(inputBoxes); let idx = index">
  输入框{{idx+1}}：<input type="text">
</div>

这个方案不需要单独写updateInputBoxes方法，选择值变化时会自动更新inputBoxes变量。

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