将 angular 8 应用程序迁移到 9 的奇怪问题

Question

我正在将应用程序从 angular 8 迁移到 9。如果我尝试构建以进行部署，则会收到此错误消息

ERROR : Cannot assign value "$event" to template variable "value". Template variables are read-only.
    at _AstToIrVisitor.visitPropertyWrite (...\node_modules\@angular\compiler\bundles\compiler.umd.js:8617:31)
    at PropertyWrite.visit (...\node_modules\@angular\compiler\bundles\compiler.umd.js:7459:28)
    at convertActionBinding (...\node_modules\@angular\compiler\bundles\compiler.umd.js:8224:49)
    at prepareEventListenerParameters (...\node_modules\@angular\compiler\bundles\compiler.umd.js:16861:27)
    at Object.params (...\node_modules\@angular\compiler\bundles\compiler.umd.js:17952:24)
    at ...\node_modules\@angular\compiler\bundles\compiler.umd.js:17725:94
    at Array.map (<anonymous>)
    at ...\node_modules\@angular\compiler\bundles\compiler.umd.js:17725:60
    at ...\node_modules\@angular\compiler\bundles\compiler.umd.js:17014:87
    at Array.map (<anonymous>)
    at TemplateDefinitionBuilder.buildTemplateFunction (...\node_modules\@angular\compiler\bundles\compiler.umd.js:17014:60)
    at ...\node_modules\@angular\compiler\bundles\compiler.umd.js:17558:60
    at ...\node_modules\@angular\compiler\bundles\compiler.umd.js:16992:81
    at Array.forEach (<anonymous>)
    at TemplateDefinitionBuilder.buildTemplateFunction (...\node_modules\@angular\compiler\bundles\compiler.umd.js:16992:37)
    at Object.compileComponentFromMetadata (...\node_modules\@angular\compiler\bundles\compiler.umd.js:18643:58)

我怎样才能发现问题发生了？

Answer 1

替换代码有点

*ngFor="let movement of allowedMovements" [(value)]="movement" 

到

*ngFor="let movement of allowedMovements; let i = index" [(value)]="allowedMovements[i]"

Answer 2

终于解决了这个问题。我发现了将其添加到 tsconfig.xml 文件中的问题。json

  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }

我不确定这是否会自动添加到新项目的 tsconfig.json 中，但在我的项目中丢失了。
启用这些选项后，我能够在编译器日志中看到错误并解决它。

Answer 3

我收到此错误：

    <input id="inputPassword" name="inputPassword"
        [(ngModel)]="password" required #password="ngModel">

然后我用一个对象（或不同的名称）替换了密码变量，它解决了这个问题。

   <input id="inputPassword" name="inputPassword"
        [(ngModel)]="user.password" required #password="ngModel">

Answer 4

正如其他人所说的问题，“模板变量是只读的”是双向绑定

适用于角度 8

  [(ngModel)] 
  [(value)]

在角度 9 中引发错误

  [(ngModel)] 
  [(value)]

适用于角度 9

  [ngModel]
  (ngModel)
  [value]

在我的情况下，我错误地将 ngModel 放在一个恰好有 $event 的 *ngFor 中

在角度 9 中引发错误

 <ng-container *ngFor="let color of palette; let i = index">
 <mat-form-field class="colorbtn">
   <input matInput type="color" [(value)]="color" 
    [(ngModel)]="color + i" (change)="Color($event, i)">
 </mat-form-field>
</ng-container>

适用于角度 9

<ng-container *ngFor="let color of palette; let i = index">
 <mat-form-field class="colorbtn">
   <input matInput type="color" [value]="color" (ngModel)="color + i" (change)="Color($event, i)">
 </mat-form-field>
</ng-container>

Answer 5

正如错误所示，模板变量是只读的，因此您无法将模型绑定到模板变量，而是可以绑定到组件属性。

就我而言，在 Angular 11 中，我将输入字段绑定到模板变量（即 [(ngModel)]="UserNameSearch"）而不是组件属性，因为我的属性名称与模板变量相同。我将组件属性更改为驼峰式大小写并使用它进行绑定并且它有效。

之前： [(ngModel)]=" U serNameSearch" （绑定到模板变量）

之后： [(ngModel)]=" u serNameSearch" （绑定到组件属性）

Answer 6

确保您没有将 DOM 中的 HTML 元素命名为与 ngModel 引用相同的名称。

这会给出错误：

<select class="custom-select mr-sm-2" id="myVariable" name="myVariable" [(ngModel)]="myVariable" #myVariable="ngModel" required>

将 HTML DOM 中的元素更改为不同的内容对我来说解决了这个问题。

<select class="custom-select mr-sm-2" id="myVariableHtml" name="myVariableHtml" [(ngModel)]="myVariable" #myVariableHtml="ngModel" required>

Answer 7

不要同时使用[(ngModel)]="password"和#password。我遇到了同样的错误，只是修复了删除#password。

Answer 8

听起来你在某个地方有一些 html 看起来像

<input #value (click)="value = $event" />

其中 input 是某个元素，(click) 是某个事件处理程序。（我使用输入和单击作为示例，错误消息并未说明它们实际上是什么）

尝试查看代码中使用模板变量（本例中为#value）的所有位置，并尝试以某种方式在事件处理程序中将事件结果分配给它。

编辑：

这是否意味着您在运行开发环境时没有看到此错误？如果是这样，是否意味着您的开发环境中没有 aot 编译？我认为 v9 现在默认将 aot 设置为 true。至少在我最近升级时是这样。