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

【问题标题】：Cannot assign to a reference or variable! Angular 6无法分配给引用或变量！角 6
【发布时间】：2019-04-17 23:24:25
【问题描述】：

我正在使用 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)

我相信我收到这些错误消息的原因是当我将这行代码添加到我的“离子输入”标签时

[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)
  }

}

【问题讨论】：

标签： angular validation ionic3

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您的组件变量和模板变量似乎正在冲突：

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

TS 文件

email: string;
password : string;

你应该改变一个人的名字，例如把它改成Email

【讨论】：

【解决方案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。在进行了一次大型重构之后，我今天花了一些时间来追踪这个问题。必须记得经常构建（产品）！

【讨论】：

是否有任何信息不支持此功能？
找遍了，没有直接找到——最近的是angular.io/guide/…

【解决方案4】：

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

文件.ts

...
private uploadFile:File
...

文件.html

<input #uploadFile type="file"/>

【讨论】：