CODEWITHSUNDEEP
angulartypescript
prabhu
prabhu

Reputation: 369

ngFor Template parse errors: Parser Error: Unexpected token = at column

I am writing an Angular app, built with Angular CLI. I have a model called globalModel in my component. This model will be built using the user inputs in the previous page. In this current page, I am displaying the data contained in this model to the user in a HTML table. Here's how i do it: 

<input type="radio" [(ngModel)]="criteria1" name="parameter1Identifier">Class A
<input type="radio" [(ngModel)]="criteria1" name="parameter1Identifier">Class B
.
.

<input type="radio" [(ngModel)]="criteria2" name="parameter2Identifier">Type 1
<input type="radio" [(ngModel)]="criteria2" name="parameter2Identifier">Type 2
.
.

<table>
<thead>
  <tr *ngIf="tableColumnCount">
    <th *ngFor="let colNumber of tableColumnCount | rangePipe">
      <input type="checkbox"
             [checked]=false
             (click)="selectAllElementsInColumnOfTheTableIn(colNumber);">
      select column {{ n + 1 }}
    </th>
  </tr>
</thead>

<tbody>
  <tr *ngFor="let row of globalModel | modelToArrayOfArraysFilter: criteria1: criteria2;">  
     <td *ngFor="let acol of row; let i = index; totalColumnsOfTheTable = row.length">      <--- Error!
         ....
     </td>
  </tr>
</tbody>
</table>

And the totalColumnsOfTheTable is defined in the component as follows: 

set totalColumnsOfTheTable(count: number) {
    if ( this.tableColumnCount < count ) {
      this.tableColumnCount = count;
      this._cd.detectChanges();
    }
}

The row of this table can have any number of elements like [obj], [obj1, obj2], [objA, objB, objC], [objN], ... This data is filtered from the model based on the criteria1 and criteria2 which the user selects on the radio button. So based on this, the table data gets populated. The variable tableColumnCount will have the count of the total number of columns and the table should update accordingly. To determine the total column count I am trying to use the setter in *ngFor as totalColumnsOfTheTable = row.length.

But, Angular throws error like

"Template parse errors: Parser Error: Unexpected token = at column 65 in [let acol of row; let i = index; totalColumnsOfTheTable = index] ".

I tried using the trackBy to acheve the same. I figured out that the this doesn't refer to 'component'. So, if i call this.totalColumnsOfTheTable = index doesn't work!
Please help me to determine the total column count or any other way to set the component variables within *ngFor loop. Any help is greatly appreciated. Any suggestions to the approach is most welcome!

Upvotes: 1

Views: 11791

Answers (1)

Poney
Poney

Reputation: 511

You forgot the let in front of your new variable, it should be like this:

<td *ngFor="let acol of row; let i = index; let totalColumnsOfTheTable = row.length">...</td>

Upvotes: 2

Related Questions