ngModel 不更新变量

Question

我正在使用 Angular 和 ionic 创建一个登录系统，并且我正在尝试使用 [(ngModel)] 连接变量以在字段更改时进行更新。 我正在关注本教程

    export class ModalLoginComponent implements OnInit {

  modal;
  state = "";
  headerText = "Sign Up";

  emailInput;
  passwordInput;
  nicknameInput;

  constructor(public toastController: ToastController, public userAuthService: UserAuthService) { }

  ngOnInit() {
    this.changeState("login");
  }

  closeModal(){
    this.modal.dismiss();
  }
submit(){
console.log(this.emailInput);
}

这是我的 HTML 代码，应该直接连接到我的变量，但是当我尝试打印时它显示未定义

<div class="container">
  <div class="login-template">
    <p class="header">{{headerText}}</p>
    <ion-input (ngModel)="emailInput" placeholder="Email"></ion-input>
    <ion-input (ngModel)="passwordInput" placeholder="Password"></ion-input>
    <a *ngIf="state != 'login'" (click)="changeState('login')" class="change-template-link" href="javascript:;">Already have an account? Click here to login!</a>
    <a *ngIf="state != 'signUp'" (click)="changeState('signUp')" class="change-template-link" href="javascript:;">Don't have an account? Click here to sign up!</a>
    <a *ngIf="state == 'login'" (click)="changeState('forgotPassword')" class="change-template-link" href="javascript:;">Forgot your password?</a>
    <ion-button class="submit-btn" (click)="submit()" color="primary">SUBMIT</ion-button>
  </div>
</div>

Answer 1

ngModel必须在所谓的“盒子里的香蕉”中。

尝试将其从(ngModel更改为[(ngModel)] 。链接

Answer 2

它不应该是“盒子里的香蕉”。 但是属性绑定必须存在

这是一种属性绑定方法，因此只要在组件中更改emailInput属性，就会更新 ngModel

<ion-input [ngModel]="emailInput" placeholder="Email"></ion-input>

这是 2 路属性绑定（你需要什么）

<ion-input [(ngModel)]="emailInput" placeholder="Email"></ion-input>

这是 2 路属性绑定，您可以将属性绑定与更改事件分开（事件也可以与 2 路 ngModel 属性绑定相结合，但有时您可能需要将它们分开）。

<ion-input [ngModel]="emailInput" (ngModelChange)="emailInputChange($event)" placeholder="Email"></ion-input>

ERROR 错误：没有用于未指定名称属性的表单控件的值访问器是因为您没有name属性

<ion-input [(ngModel)]="emailInput" name="email" placeholder="Email"></ion-input>