When using the ngFor loop and two-way data-binding, I want to receive better error message

[splincode]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[x] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

I use Primeng components. When I use ng-templates, I can not create a component, with a link to the instance. Angular compiler sends incomprehensible errors.

<pre>{{cars|json}}</pre>
<p-dataTable [value]="cars">
   
    <p-column header="FieldInstance:">
      <ng-template let-car="rowData" let-index="rowIndex" pTemplate="body">
        [{{index}}]: {{car|json}}
        <car-entity [(value)]="car"></car-entity>
      </ng-template>
    </p-column>

</p-dataTable>

ERROR in : Error: Cannot assign to a reference or variable!
    at _AstToIrVisitor.visitPropertyWrite (C:\Users\splincode\Desktop\dev\rosnfo-ui\rosnfo-ui\node_modules\@angular\compiler\bundles\compiler.umd.js:26426:23)
    at PropertyWrite.visit (C:\Users\splincode\Desktop\dev\rosnfo-ui\rosnfo-ui\node_modules\@angular\compiler\bundles\compiler.umd.js:4722:24)
    at convertActionBinding (C:\Users\splincode\Desktop\dev\rosnfo-ui\rosnfo-ui\node_modules\@angular\compiler\bundles\compiler.umd.js:25850:45)
    at C:\Users\splincode\Desktop\dev\rosnfo-ui\rosnfo-ui\node_modules\@angular\compiler\bundles\compiler.umd.js:28450:22
    at Array.forEach (<anonymous>)
    at ViewBuilder._createElementHandleEventFn (C:\Users\splincode\Desktop\dev\rosnfo-ui\rosnfo-ui\node_modules\@angular\compiler\bundles\compiler.umd.js:28446:18)
    at nodes.(anonymous function) (C:\Users\splincode\Desktop\dev\rosnfo-ui\rosnfo-ui\node_modules\@angular\compiler\bundles\compiler.umd.js:27865:27)
    at C:\Users\splincode\Desktop\dev\rosnfo-ui\rosnfo-ui\node_modules\@angular\compiler\bundles\compiler.umd.js:28391:22
    at Array.map (<anonymous>)
    at ViewBuilder._createNodeExpressions (C:\Users\splincode\Desktop\dev\rosnfo-ui\rosnfo-ui\node_modules\@angular\compiler\bundles\compiler.umd.js:28390:56)
    at ViewBuilder.build (C:\Users\splincode\Desktop\dev\rosnfo-ui\rosnfo-ui\node_modules\@angular\compiler\bundles\compiler.umd.js:27627:23)
    at C:\Users\splincode\Desktop\dev\rosnfo-ui\rosnfo-ui\node_modules\@angular\compiler\bundles\compiler.umd.js:27626:63
    at Array.forEach (<anonymous>)
    at ViewBuilder.build (C:\Users\splincode\Desktop\dev\rosnfo-ui\rosnfo-ui\node_modules\@angular\compiler\bundles\compiler.umd.js:27626:23)
    at ViewCompiler.compileComponent (C:\Users\splincode\Desktop\dev\rosnfo-ui\rosnfo-ui\node_modules\@angular\compiler\bundles\compiler.umd.js:27527:60)
    at AotCompiler._compileComponent (C:\Users\splincode\Desktop\dev\rosnfo-ui\rosnfo-ui\node_modules\@angular\compiler\bundles\compiler.umd.js:31006:62)

https://stackblitz.com/edit/angular-eiskqo?file=app/app.component.html

Expected behavior

If you comment on a piece of code, you can see that car is an object that you can use in the future. But I can not create a component ...

https://stackblitz.com/edit/angular-bd7std?file=app/app.component.html

<pre>{{cars|json}}</pre>
<p-dataTable [value]="cars">
   
    <p-column header="FieldInstance:">
      <ng-template let-car="rowData" let-index="rowIndex" pTemplate="body">
        [{{index}}]: {{car|json}}
        <!--<car-entity [(value)]="car"></car-entity>-->
      </ng-template>
    </p-column>

</p-dataTable>

Of course, you can bypass the error in this way:

<pre>{{cars|json}}</pre>
<p-dataTable [value]="cars">
   
    <p-column header="FieldInstance:">
      <ng-template let-car="rowData" let-index="rowIndex" pTemplate="body">
        [{{index}}]: {{car|json}}
        <car-entity [(value)]="cars[index]"></car-entity>
        <!-- OR: <car-entity [value]="car" (valueChange)="valueChange()"></car-entity> -->
      </ng-template>
    </p-column>

</p-dataTable>

But in my opinion this is a cant, if we can not normally logically handle the code according to the syntax [(**)]. I would like to know the cause of the error.

https://stackblitz.com/edit/angular-c356jp?file=app/app.component.html

Minimal reproduction of the problem with instructions

https://stackblitz.com/edit/angular-eiskqo?file=app/app.component.html

Angular version: 5.x.x

[lacroixdavid1]

@splincode This is not related to ng-template, it's *ngFor related. You can't reassign a *ngFor variable.

This would cause problems too :

     <div *ngFor="let car of cars">
         <car-entity [(value)]="car"></car-entity> 
      </div>

But this would be fine (assuming a variable named myCar is declared in the controller):

     <car-entity [(value)]="myCar"></car-entity> 
     <div *ngFor="let car of cars">
         <car-entity [value]="car"></car-entity> 
      </div>

[trotyl]

Duplicate of #17144

[splincode]

#19819
I realized that this is not a bug. But I want to see an adequate error, with an example of how not to do in the template...

[trotyl]

By convention "better error message" should be consider feature request rather than bug report, also it's better to update the title & description for not making others confused.

[splincode]

I do renamed issue

[splincode]

@lacroixdavid1

Analogia:

const items = [1, 2, 3]
for (let item of items) {
  item = item + 1
}

But I can:

const items = [{a: 1}, {a: 2}, {a: 3}]
for (let item of items) {
  item.a++;
}

// item - is object, we can mutate this, and saved immutable links

[lacroixdavid1]

Don't mix up a template for loop and typescript for loops: they do not work the same.
@splincode both of your previous example works fine because in the first case you are only reassigning the for loop reference variable. Maybe you could use the decorator pattern to wrap your car to be able to reassign it?

[mhevery]

The error was Error: Cannot assign to a reference or variable! What error would you like to see? It should be trivial to change that string and send a PR.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}