Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

[Angular] ERROR in Cannot assign to a reference or variable! を解決する

More than 1 year has passed since last update.

環境

  • Angular CLI: 8.3.25
  • Node: 10.16.3
  • OS: win32 x64
  • Angular: 8.2.14

原因

双方向バインディング(2方向バインディング, Two way binding)の機能を提供していないプロパティに対して双方向バインディングのシンタックス [()] を適用していた

解決策

そもそも双方向バインディングの必要性がなかったため単方向バインディングのシンタックスに修正

状況

ng build --prod を実行したときに発生
ng serve やプロダクションモードでないビルドではエラーが出ないので発見が遅れた

ERROR in Cannot assign to a reference or variable!

そしてこのエラー、情報量少なすぎる!

具体例(私の場合)

修正前

<mat-form-field>
    <mat-label>ラベル</mat-label>
    <mat-select [value]="selected">
        <mat-option [(value)]="role" *ngFor="let role of roles"> {{role}} </mat-option>
    </mat-select>
</mat-form-field>

<mat-option [(value)]="role" *ngFor="let role of roles">role が双方向バインディングされているが、1行上の selected に指定したかった

修正後

<mat-form-field>
    <mat-label>ラベル</mat-label>
    <mat-select [(value)]="selected">
        <mat-option [value]="role" *ngFor="let role of roles"> {{role}} </mat-option>
    </mat-select>
</mat-form-field>

おわりに

このエラーでぱっと検索してみると他の原因で出ている方もいるようなので、あくまで原因の1例って感じですね

「抽象的な良くわからないエラーメッセージ」 → 「検索してもぱっと解決策がない」 のコンボくらうと調査が大変になりますよね

すごい初歩的な間違いだったんですが、ng serve 時にはエラーが出ないこともあって、バグ発見前に開発が進み調査対象が大きくなったので原因のわりに特定が大変でした

いつもエラー解決系の記事にはお世話になっているので書いてみました
みなさんいつもありがとうございます!

atilol
プログラマー
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away