未捕获的错误：无法分配给引用或 > 变量！ > 在 _AstToIrVisitor.visitPropertyWrite答案

【问题标题】：Uncaught Error: Cannot assign to a reference or > variable! > at _AstToIrVisitor.visitPropertyWrite未捕获的错误：无法分配给引用或 > 变量！ > 在 _AstToIrVisitor.visitPropertyWrite
【发布时间】：2018-08-27 10:46:34
【问题描述】：

我正在关注 angular.io 网站上的一个示例，该示例使用输入创建 angular 表单，但我遇到了一个错误：

compiler.js:26390 未捕获错误：无法分配给引用或多变的！在 _AstToIrVisitor.visitPropertyWrite (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:26611:23) 在 PropertyWrite.visit (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:4900:24) 在 convertActionBinding (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:26035:45) 在 eval (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:28635:22) 在 Array.forEach () 在 ViewBuilder._createElementHandleEventFn (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:28631:18) 在节点处。（匿名函数）（webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:28050:27）在 eval (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:28576:22) 在 Array.map() 在 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>

上面的代码有什么问题？

【问题讨论】：

标签： angular typescript

【解决方案1】：

你的问题在这里：

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

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

【讨论】：