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

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>

[angular-automatic-lock-bot[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.}