ngFor模板解析错误:解析器错误:意外令牌=位于列 [英] ngFor Template parse errors: Parser Error: Unexpected token = at column

问题描述

我正在编写一个使用Angular CLI构建的Angular应用程序.我的组件中有一个名为globalModel的模型.该模型将使用上一页中的用户输入来构建.在当前页面中，我正在HTML表中向用户显示该模型中包含的数据.这是我的操作方法:

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>

totalColumnsOfTheTable在组件中的定义如下:

And the totalColumnsOfTheTable is defined in the component as follows:

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

此表的row可以具有任意数量的元素，例如[obj]，[obj1，obj2]，[objA，objB，objC]，[objN]，...用户在单选按钮上选择的criteria1和criteria2上.因此，基于此，将填充表数据.变量tableColumnCount将具有列总数的计数，并且该表应相应更新.为了确定总列数，我尝试将*ngFor中的setter用作totalColumnsOfTheTable = row.length.

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.

但是，Angular会引发错误，例如

But, Angular throws error like

模板解析错误:解析器错误:意外的令牌=第65列 在[让行列中；让我=索引; totalColumnsOfTheTable = 索引].

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

我尝试使用trackBy达到相同的目的.我发现this没有引用'component'.因此，如果我拨打this.totalColumnsOfTheTable = index不起作用！
请帮助我确定总列数或在*ngFor循环中设置组件变量的任何其他方式.任何帮助是极大的赞赏.欢迎对该方法提出任何建议！

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!

推荐答案

您忘记了新变量前面的let，它应该像这样:

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>

这篇关于ngFor模板解析错误:解析器错误:意外令牌=位于列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！