Question

我正在尝试离子+角钢

login-component.html ：

<ion-content [fullscreen]="true">
  <div>
    <div style="margin-left:10%; margin-right:10%; margin-top: 5%;">
      <ion-input [(ngModel)]="username" placeholder="Nombre de usuario"></ion-input>
      <br>
      
      {{username}}
      
      <ion-input [(ngModel)]="password" type="password"  placeholder="Contraseña" ></ion-input>
    </div>
  </div>

  <div style="margin-left:10%; margin-right:10%; margin-top: 5%;">
    <ion-button (click)="login()">Acceder</ion-button>
    <ion-button>Cancelar</ion-button>
  </div>
</ion-content>

login-component.ts ：

import { Component, OnInit } from '@angular/core';
import { AuthenticationLoginService } from 'authentication-login';

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

  constructor(
    loginService: AuthenticationLoginService
  ) { }

  ngOnInit() {}

  async login() {
    alert(`hola ${this.username}!`);
  }
}

当我按下按钮时，它会显示一条警告，提示 hola undefined！！如果我确实使用一些数据初始化了用户名，则它会正确显示在{{username}}行中，因此由于某些原因，[（ngModel）]指令似乎无法正常工作。浏览器控制台和ionic serve命令未显示错误。

离子信息：

Ionic:

   Ionic CLI                     : 6.11.8 (/usr/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.3.2
   @angular-devkit/build-angular : 0.1000.8
   @angular-devkit/schematics    : 10.0.8
   @angular/cli                  : 10.0.8
   @ionic/angular-toolkit        : 2.3.3

Capacitor:

   Capacitor CLI   : 2.4.1
   @capacitor/core : 2.4.1

Utility:

   cordova-res                          : not installed
   native-run (update available: 1.1.0) : 0.2.5

System:

   NodeJS : v14.10.1 (/usr/bin/node)
   npm    : 6.14.8
   OS     : Linux 4.19

有什么想法吗？预先感谢。-

德语

Answer 1

已解决。正如@Pankaj Sati所说，需要将FormsModule 和 IonicModule添加到module.ts文件：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';

import { AuthenticationRoutingModule } from './authentication-routing.module';

import { LoginComponent } from './login/login.component';

@NgModule({
  declarations: [
    LoginComponent
  ],
  imports: [
    CommonModule,
    AuthenticationRoutingModule,
    IonicModule,
    FormsModule,
  ]
})
export class AuthenticationModule { }

这些更改之后，所有内容都像一个魅力。干杯

离子和角度ngModel无法正常工作

1 个答案: