Angular模板无法重赋值变量时按首字母分组列表的实现方法

Angular 模板为声明式设计，禁止模板表达式内存在赋值类副作用操作，因此你尝试的模板内维护遍历变量的思路本身不符合框架设计规范，最优实现是优先在组件层完成数据结构整理，再交给模板渲染，可维护性和性能都是最优的。

推荐方案：组件层预处理分组（性能最优、可维护性最高） #

由于你的原始单词列表已经按字母顺序完成排序，仅需单次O(n)遍历就能把扁平列表转换为按首字母分组的嵌套结构，后续模板渲染不需要做任何逻辑判断。

1. 首先在组件类中完成列表分组预处理：

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

@Component({
  selector: 'app-word-list',
  templateUrl: './word-list.component.html'
})
export class WordListComponent implements OnInit {
  // 原始已排序的单词列表
  wordList: string[] = ['apple', 'apply', 'banana', 'cat', 'code'];
  // 分组后的数据结构
  groupedWords: Array<{ initial: string; words: string[] }> = [];

  ngOnInit(): void {
    this.buildWordGroups();
  }

  private buildWordGroups(): void {
    let currentInitial = '';
    this.wordList.forEach(word => {
      // 统一取首字母大写，避免大小写不统一导致分组错误
      const firstChar = word.charAt(0).toUpperCase();
      if (firstChar !== currentInitial) {
        currentInitial = firstChar;
        this.groupedWords.push({
          initial: currentInitial,
          words: []
        });
      }
      // 把当前单词归入最新的分组
      this.groupedWords.at(-1)?.words.push(word);
    });
  }
}

2. 模板层直接嵌套遍历分组结构，逻辑清晰无hack：

<ul class="word-list">
  <ng-container *ngFor="let group of groupedWords">
    <li class="group-header">
      <b>{{ group.initial }}</b>
    </li>
    <li *ngFor="let word of group.words" class="word-item">
      {{ word }}
    </li>
  </ng-container>
</ul>

这个方案的优势：

• 完全符合Angular设计规范，没有任何奇技淫巧，后续维护成本极低
• 分组逻辑仅在初始化时执行一次，变更检测阶段不会重复运行判断逻辑，长列表下性能优势明显
• 后续扩展分组折叠、字母锚点跳转等功能时，不需要改动模板核心结构

轻量场景替代方案：纯模板判断（不推荐长列表使用） #

如果列表长度不大、不想改动组件层数据，可以借助*ngFor导出的索引值，对比当前项和前一项的首字母判断是否显示分组标题，不需要额外维护变量：

<ul class="word-list">
  <ng-container *ngFor="let word of wordList; let i = index">
    <li *ngIf="i === 0 || wordList[i-1].charAt(0) !== word.charAt(0)" class="group-header">
      <b>{{ word.charAt(0) }}</b>
    </li>
    <li class="word-item">{{ word }}</li>
  </ng-container>
</ul>

注意：该方案在每次变更检测时都会重复执行首字母对比逻辑，列表长度超过千条时会产生不必要的性能开销，仅适合小型临时场景使用。

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