angular - Uncaught Error : Cannot assign to a reference or > variable! > 在 _AstToIrVisitor.visitPropertyWrite

Question

我正在按照 angular.io 网站上的一个示例创建带有输入的 Angular 表单，但我遇到了一个错误:

compiler.js:26390 Uncaught Error: Cannot assign to a reference or variable! at _AstToIrVisitor.visitPropertyWrite (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:26611:23) at PropertyWrite.visit (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:4900:24) at convertActionBinding (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:26035:45) at eval (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:28635:22) at Array.forEach () at ViewBuilder._createElementHandleEventFn (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:28631:18) at nodes.(anonymous function) (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:28050:27) at eval (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:28576:22) at Array.map () at ViewBuilder._createNodeExpressions (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:28575:56)

我所做的唯一更改是将“名称”重命名为“用户名”。

dashboard.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

  username: string;
  submitted = false;

  constructor() { 
  }

  ngOnInit() {
  }

  onSubmit() { this.submitted = true; }

}

dashboard.component.html

<div class="row justify-content-md-center">
    <div class="col col-lg-12">
      <form (ngSubmit)="onSubmit()" #usernameForm="ngForm" >
        <div class="form-group">
          <label for="username">Name</label>                    

          <input type="text" class="form-control" id="name"
          required
          [(ngModel)]="username" name="name"
          #username="ngModel">

          <div [hidden]="username.valid || username.pristine"
              class="alert alert-danger">
            Name is required
          </div>
        </div>
        <button type="submit" class="btn btn-success">Submit</button>
      </form>
    </div>
</div>

上面的代码有什么问题？

Answer 1

你的问题在这里:

[(ngModel)]="username" name="name"
      #username="ngModel">

执行此操作时，您正在为模板创建变量 username，它引用 NgModel 实例。因此，当您将 ngModel 绑定(bind)到 username 时，编译器认为您绑定(bind)的是引用，而不是组件的 username 属性，因为模板变量隐藏同名的组件属性。将引用的名称更改为 usernameModel 或类似的名称(并记住在您使用它的任何地方都更改它，就像在显示错误的 div 中一样)和它应该可以正常工作。