ngFor 模板解析错误：Parser Error: Unexpected token = at column答案

【问题标题】：ngFor Template parse errors: Parser Error: Unexpected token = at columnngFor 模板解析错误：Parser Error: Unexpected token = at column
【发布时间】：2017-12-18 14:41:56
【问题描述】：

我正在编写一个使用 Angular CLI 构建的 Angular 应用程序。我的组件中有一个名为 globalModel 的模型。该模型将使用上一页中的用户输入构建。在当前页面中，我在 HTML 表格中向用户显示此模型中包含的数据。我是这样做的：

<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在组件中定义如下：

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 中的设置器用作totalColumnsOfTheTable = row.length。

但是，Angular 会抛出类似

的错误

"模板解析错误：解析器错误：意外标记 = 在第 65 列在 [let acol of row;让 i = 索引； totalColumnsOfTheTable = 索引]"。

我尝试使用trackBy 来达到同样的效果。我发现this 不是指“组件”。所以，如果我打电话给this.totalColumnsOfTheTable = index 不起作用！
请帮助我确定总列数或在*ngFor 循环中设置组件变量的任何其他方式。任何帮助是极大的赞赏。欢迎对这种方法提出任何建议！

【问题讨论】：

标签： angular typescript

【解决方案1】：

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

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

【讨论】：

如果我添加let，它会成为模板的局部变量。但是，我希望它在组件中。这就是我没有添加let 的原因。有没有办法可以将index 值存储在组件的public totalColumnsOfTheTable : number; 变量中？
啊，对不起，你知道你的变量 globalModel 将在哪里更新吗？也许您可以使用带有循环的“set globalModel”来计算其中每个项目的长度？
如果理解正确，当您单击单选按钮时，变量会更新，您可以使用此函数在每个上添加（更改）每行的长度。
或者，另一种方法是使用函数 tableColumnCount() 而不是变量。然后，您可以通过 globalModel 循环查找该函数内部的最长行，并且该函数将在每次更新 globalModel 时自行更新。