用于输入的 ngModel 数据绑定在 ionic 中给出未定义

Question

我正在尝试将 HTML 输入标记中的用户输入值保存到一个变量中，以便我可以使用它来执行某些功能。但是，当我尝试使用 ngModel 进行数据绑定时，我将值放入的变量未定义。代码如下：

HTML

  <ion-grid>
    <ion-row justify-content-center>

      <ion-col >
        <ion-img id="luxeticLogo" src ="../../assets/luxeticLogo.JPG"> </ion-img>
        <div padding>
        <ion-item>
          <ion-input autocorrect="on" autofocus="on" clearInput="true" clearOnEdit="true" color="primary" inputmode="text" placeholder="Username" required="true" [(ngModel)]="userName"></ion-input>
          <ion-icon name="person" color="primary" slot="start"></ion-icon>
        </ion-item>
        </div>

        <div padding>
          <ion-item>
            <ion-input autofocus="on" clearInput="true" clearOnEdit="true" color="primary" inputmode="text" type = "password" placeholder="Password" required="true" [(ngModel)]="password"></ion-input>
            <ion-icon  name="lock-closed-outline" color="primary" slot="start"></ion-icon>
          </ion-item>
        </div>
    
        <div padding >
          <ion-button id="loginButton" size="large"  expand="block" (click)="loginSubmit()">Login</ion-button>
        </div>
      </ion-col>

    </ion-row>
    </ion-grid>

TS

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


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

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

  }

}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(), 
    AppRoutingModule, 
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

输出：

提交未定义未定义

Answer 1

您将密码和用户名分配给私有模板无法访问私有变量尝试将其分配给公共