Ionic中ngModel绑定输入框值返回undefined问题排查

看起来你踩了Angular模板访问权限的坑！你的userName和password变量被声明为private，这就导致模板（HTML）无法访问它们，所以[(ngModel)]根本没法把输入值绑定到这些变量上，最终打印出来就是undefined。

修复步骤： #

• 把组件类中的私有变量改为公共属性（Angular中默认属性是public，所以直接去掉private修饰符即可）
• 给password也加上明确的类型声明，保持代码规范

修改后的TS代码如下：

import { Component, OnInit } from '@angular/core'; 
import { Router } from "@angular/router"; 

@Component({ 
  selector: 'app-login-page', 
  templateUrl: './login-page.component.html', 
  styleUrls: ['./login-page.component.scss'], 
}) 
export class LoginPageComponent implements OnInit { 
  userName: string;
  password: string;

  constructor(private router: Router) { } 

  ngOnInit() {} 

  loginSubmit(){ 
    console.log("submit", this.userName, this.password); 
  } 
}

为什么会这样？ #

Angular的模板只能访问组件类中**公共（public）**的属性和方法，私有成员在模板的上下文环境里是不可见的。你之前用private修饰了变量，模板就无法完成双向绑定的赋值操作，自然变量值始终是undefined。

另外检查了你的app.module.ts，已经正确导入了FormsModule（这是使用ngModel的必要条件），所以这部分没问题，不用修改。

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