angular - 无法分配给引用或变量! Angular 6

Question

我正在使用 Ionic 3 和 Angular 6 创建验证表单，但遇到了问题。当我运行我的应用程序时，我收到这些错误消息

core.js:1449 ERROR Error: Uncaught (in promise): Error: Cannot assign to a reference or variable!
Error: Cannot assign to a reference or variable!
    at _AstToIrVisitor.visitPropertyWrite (compiler.js:26396)
    at PropertyWrite.visit (compiler.js:4681)
    at convertActionBinding (compiler.js:25820)
    at compiler.js:28420
    at Array.forEach (<anonymous>)
    at ViewBuilder._createElementHandleEventFn (compiler.js:28416)
    at nodes.(:8101/anonymous function) (http://localhost:8101/build/vendor.js:119225:27)
    at compiler.js:28361
    at Array.map (<anonymous>)
    at ViewBuilder._createNodeExpressions (compiler.js:28360)
    at _AstToIrVisitor.visitPropertyWrite (compiler.js:26396)
    at PropertyWrite.visit (compiler.js:4681)
    at convertActionBinding (compiler.js:25820)
    at compiler.js:28420
    at Array.forEach (<anonymous>)
    at ViewBuilder._createElementHandleEventFn (compiler.js:28416)
    at nodes.(:8101/anonymous function) (http://localhost:8101/build/vendor.js:119225:27)
    at compiler.js:28361
    at Array.map (<anonymous>)
    at ViewBuilder._createNodeExpressions (compiler.js:28360)
    at c (polyfills.js:3)
    at c (polyfills.js:3)
    at polyfills.js:3
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask (core.js:4751)
    at t.invokeTask (polyfills.js:3)
    at r.runTask (polyfills.js:3)
    at o (polyfills.js:3)

我相信我收到这些错误消息的原因是当我将这行代码添加到我的“ion-input”标签时

[ngClass]="{'is-invalid':f.submitted && email.invalid}"

我仔细检查了我的工作，以确保它与教程相匹配，但我仍然找不到错误形成的位置。有人可以帮忙吗？这是我的代码

HTML

<ion-header>

  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>profile</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <form name="form" #f="ngForm" novalidate>
  <ion-list>
    <ion-item>
        <ion-label for="email" fixed>email</ion-label>
        <ion-input type="email" [(ngModel)]="email" [(ngModel)]="model.email" #email="ngModel" [ngClass]="{'is-invalid':f.submitted && email.invalid}" name="email" class="form-control" required></ion-input>
        <div class="invalid-feedback">
          <div>Email is required</div>
        </div>
    </ion-item>
    <button ion-button block type="button" (click)="login()" > Sign In</button>
    <button ion-button block outline type="button" (click)="goToSignup()" > Sign Up</button>
</ion-list>
</form>
</ion-content>

TS文件

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AngularFireAuth } from '@angular/fire/auth';
import { SignupPage } from '../signup/signup';
import { FormBuilder, FormGroup } from '@angular/forms';
import { FormsModule } from '@angular/forms';
/**
 * Generated class for the ProfilePage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-profile',
  templateUrl: 'profile.html',
})
export class ProfilePage {

  email: string;
  password : string; 
  model:any = {}
  constructor(public aAuth : AngularFireAuth, public navCtrl: NavController, public navParams: NavParams) {

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad LoginPage');
  }

  login(){
   this.aAuth.auth.signInWithEmailAndPassword(this.email, this.password).then(
     e => {console.log(e)}
     )
  }

  goToSignup(){
    this.navCtrl.push(SignupPage)
  }

}

Answer 1

您使用了两个 ngModel 来指向不同的变量。删除不需要的。

<ion-input type="email" [(ngModel)]="email" [(ngModel)]="model.email" ....