Angular的HTML模板中如何声明赋值变量，实现分类仅单次展示

Angular模板是否支持声明跨循环项的存储变量？ #

Angular 模板本身不支持声明可以在*ngFor不同循环项之间共享的持久化变量，模板变量的作用域仅限当前元素或所属的内嵌视图，无法跨循环项传递状态，因此你想直接在模板中存储上一个分类名的方案不可行。

实现方案 #

方案1：TS层预处理数据按分类分组（推荐） #

该方案性能最优、可维护性最高，无需依赖原数组的项顺序，同分类无论是否连续都只会展示一次。
在你获取数据的subscribe回调中新增分组逻辑：

getMenuByTruck = () =>{
    const id: string = this.activeRoute.snapshot.params['id'];
    const apiMenu: string = environment.apiAddress + 'TruckMenu/' + id;

    this.repository.getData(apiMenu)
    .pipe(finalize(() => {
      this.updateTruckName();
    }))
      .subscribe(response => {
        const rawMenu = response as Menu[];
        const categoryMap = new Map<string, Menu[]>();
        // 按分类分组
        rawMenu.forEach(item => {
          const cateKey = item.foodCategory?.description ?? '未分类';
          if (!categoryMap.has(cateKey)) {
            categoryMap.set(cateKey, []);
          }
          categoryMap.get(cateKey).push(item);
        });
        // 转换为可遍历的分组数组
        this.groupedMenu = Array.from(categoryMap.entries()).map(([category, items]) => ({
          category,
          items
        }));
      },
      (error) =>{
        this.errorHandler.handleError(error);
        this.errorMessage = this.errorHandler.errorMessage;
      })
}

修改模板代码，嵌套遍历分组：

<!-- 外层遍历分类，每个分类只显示一次标题 -->
<div *ngFor="let group of groupedMenu">
  <h3>{{group.category}}</h3>
  <!-- 内层遍历当前分类下的所有商品 -->
  <div class="menu-item" *ngFor="let item of group.items">
    <!-- 这里放你的商品渲染逻辑 -->
  </div>
</div>

方案2：模板中利用索引比对（仅适合同分类项连续的场景） #

如果你的原接口返回的menu数组已经保证同分类的项是连续排列的，可以直接用*ngFor导出的index变量取上一个项做比对：

<div class="title" *ngFor="let m of menu; let i = index">
  <!-- 第一个项或者分类和上一项不一致时展示分类标题 -->
  <h3 *ngIf="i === 0 || m.foodCategory?.description !== menu[i-1]?.foodCategory?.description">
    {{m.foodCategory?.description}}
  </h3>
  <!-- 这里放你的商品渲染逻辑 -->
</div>

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