Angular 7复选框change事件获取值为undefined的问题求助

嘿，这问题我碰到过好多次，咱们直接说怎么搞定：

你现在拿到undefined是因为模板里(change)事件传的s根本没定义，没给这个参数赋值呀！给你三种靠谱的解决办法，按需选就行：

方法1：通过$event获取复选框状态 #

这是Angular里获取事件对象的标准操作，把$event作为参数传给方法，再从事件对象里提取选中状态：

修改后的HTML代码：

<div> 
  <input type="checkbox" id="chk" style="width: 13px; height: 13px;" checked="checked" (change)="isInvestedSelected($event)" /> 
  <label for="chk">Invested</label> <!-- 顺便提个小问题：你之前label的for是chkInvested，和input的id chk不匹配，点击label不会触发复选框切换，我已经帮你改过来啦 -->
</div>

组件代码：

isInvestedSelected(event: Event) {
  const isChecked = (event.target as HTMLInputElement).checked;
  console.log(isChecked); // 现在就能拿到true或false了
}

方法2：用模板引用变量直接传状态 #

给复选框加个模板引用变量（比如#checkbox），直接把它的checked属性作为参数传进去，写法更简洁：

HTML代码：

<div> 
  <input #checkbox type="checkbox" id="chk" style="width: 13px; height: 13px;" checked="checked" (change)="isInvestedSelected(checkbox.checked)" /> 
  <label for="chk">Invested</label>
</div>

组件代码：

isInvestedSelected(isChecked: boolean) {
  console.log(isChecked); // 直接拿到布尔值，不用再处理事件对象
}

方法3：结合双向绑定（适合需要同步组件状态的场景） #

要是你需要在组件里长期维护这个复选框的状态，可以用[(ngModel)]双向绑定，事件触发时直接用组件变量就行：

第一步：先确保模块导入FormsModule

// 比如app.module.ts或者你的功能模块
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // ...其他导入项
    FormsModule
  ]
})
export class YourModule { }

HTML代码：

<div> 
  <input type="checkbox" id="chk" style="width: 13px; height: 13px;" [(ngModel)]="isChecked" (change)="isInvestedSelected()" /> 
  <label for="chk">Invested</label>
</div>

组件代码：

isChecked = true; // 初始值和checked属性保持一致

isInvestedSelected() {
  console.log(this.isChecked); // 直接用组件里的变量获取状态
}

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