Angular 2- Error Cannot assign to a reference or variable

Issue

I am using Angular 2. I have 2 nested ng-template as below:

<ng-template ngFor let-support [ngForOf]="support">
 <div class="row">
    <div class="col-sm-3">
       <div class="form-group form-float">
          <div class="form-line focused">
             <select [ngModelOptions]="{standalone: true}" [(ngModel)]="support.option" class="form-control">
                 <option value="1">1</option>
                 <option value="2">2</option>
                 <option value="3">3</option>
                 <option value="4">4</option>                                   
             </select>
             <label class="form-label">Option</label>
           </div>
         </div>
       </div>
    <div class="col-sm-3">
       <ng-template ngFor let-op3 [ngForOf]="support.option3">
          <select [ngModelOptions]="{standalone: true}" [(ngModel)]="op3" class="form-control">
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
          </select>
          <label class="form-label">Option3</label>
       </ng-template>
    </div>
  </div>
</ng-template>

It works fine without the inner ng-template. With having the inner loop it throws the following error:

core.js:1449 ERROR Error: Uncaught (in promise): Error: Cannot assign
to a reference or variable! Error: Cannot assign to a reference or
variable!

Here is the Support model:

{
"support": [
      {
        "option": "string",
        "option2": "string",
        "option3": ["string"]
      }
   ]
}

Solution

Just found it! I had to change the inner binding to:

<ng-template ngFor let-op3 [ngForOf]="support.option3" let-op3Index="index2">
    <div class="row">
         <div class="form-group form-float">
             <div class="form-line focused">
                <select [ngModelOptions]="{standalone: true}" [(ngModel)]="op3[index2]" class="form-control">
                    <option value="xxx">xxx</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                </select>
              <label class="form-label">Option3</label>
            </div>
          </div>
        </div>
      </ng-template>

Answered By – Mohammad Shadmehr

Answer Checked By – Katrina (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.