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指向不同的variables。删除不需要的一个。

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

Answer 2

您的组件变量和模板变量似乎正在碰撞：

<ion-input ... [(ngModel)]="email" ... #email="ngModel"** ...></ion-input>

TS文件

email: string;
password : string;

您应该更改一个的名称，例如将其更改为电子邮件

Answer 3

显然，当您尝试在模板中设置上下文变量时，也会得到此信息

<ng-container *ngTemplateOutlet="example; context:{thing: thing}"></ng-container>
<ng-template #example let-thing="thing">
    <button (click)="thing = !thing">Click me</button>
</ng-template>

除了在ng build --prod上编译和运行。经过大量的重构，今天花了我一段时间来追踪这个问题。要记得经常建立（生产）！

Answer 4

在我的.ts文件中，我声明了一个与html文件中的模板引用同名的变量，因此出现错误

file.ts

...
private uploadFile:File
...

file.html

<input #uploadFile type="file"/>

无法分配给引用或变量！角度6

4 个答案: