如何在Angular模板中实现变量值自增

不要直接在 Angular 模板里写 {{count++}} 这类自增表达式。
Angular 的变更检测机制会在单个检测周期内多次执行模板表达式，自增属于带副作用的操作，会导致计数结果完全错乱，甚至触发ExpressionChangedAfterItHasBeenCheckedError报错，根本达不到预期效果。
你贴的JSP逐行计数效果，用下面两种符合Angular规范的写法就能实现： #

方案1：*ngFor 循环渲染（优先使用） #

需要逐行计数的场景基本都是渲染一组有序内容，把待展示的行文本按顺序存在数组里，用Angular内置的*ngFor指令循环，直接用指令提供的index变量做计数即可，不需要手动维护自增变量。
组件ts文件代码：

import { Component } from '@angular/core';

@Component({
  selector: 'app-count-demo',
  templateUrl: './count-demo.component.html'
})
export class CountDemoComponent {
  // 按展示顺序存放所有行文本
  lineTexts = [
    'This is line with Text',
    'This is another line with different text',
    'This is line with different text',
    'This is last line'
  ];
}

模板html文件代码：

<ng-container *ngFor="let text of lineTexts; let i = index">
  <!-- i默认从0开始，加1就匹配原JSP里count从1开始的规则 -->
  {{ i + 1 }} {{ text }}<br>
</ng-container>

渲染结果和你给出的JSP代码输出完全一致，没有副作用，性能和稳定性都符合框架要求。 #

方案2：零散行提前绑定固定序号 #

如果行内容零散分布在模板不同位置，中间穿插其他组件、内容，不适合用循环统一渲染，也不要尝试在模板里写自增逻辑，直接在组件类里提前定义好每个位置对应的序号和文本，模板直接绑定值即可：
组件ts文件代码：

export class CountDemoComponent {
  line1 = { num: 1, text: 'This is line with Text' };
  line2 = { num: 2, text: 'This is another line with different text' };
  line3 = { num: 3, text: 'This is line with different text' };
  line4 = { num: 4, text: 'This is last line' };
}

模板html文件代码：

<div>其他无关模块内容</div>
<p>{{line1.num}} {{line1.text}}</p>
<app-other-component></app-other-component>
<p>{{line2.num}} {{line2.text}}</p>
<div>其他独立区块</div>
<p>{{line3.num}} {{line3.text}}</p>
<p>{{line4.num}} {{line4.text}}</p>

核心原则：Angular 模板只负责渲染组件提供的数据，所有会修改状态的逻辑（比如变量自增）都要放在组件类中处理，不要在模板表达式里写带副作用的操作，照搬JSP嵌脚本的写法会踩很多变更检测的坑。

内容的提问来源于stack exchange，提问作者Akhil Srivastava