如何在Angular的*ngIf模板中修改变量值？调用自定义方法无效怎么解决

问题根因 #

1. Angular的*ngIf指令的else后只能绑定ng-template对应的模板引用变量，不能直接写方法调用，你现有的写法会让Angular尝试查找名为modify()的模板，自然匹配失败，方法也不会执行。
2. 你的逻辑设计存在隐患：就算else后支持执行方法，遍历每个年份不匹配的项目都会触发一次currentYear减1，修改状态会触发Angular重新渲染页面，渲染过程中又会再次执行方法修改状态，最终陷入无限变更检测循环，导致页面崩溃。

修复方案 #

你要实现的是按年份从高到低分组展示对应研究项目的效果，不需要靠动态修改currentYear实现，直接在组件初始化时对研究列表做分组处理即可：

1. 修改 ts 文件添加分组逻辑 #

import { Component, OnInit } from '@angular/core';
import { Research } from './research';
import { ResearchList } from './research-list';

@Component({
  selector: 'app-research-list',
  templateUrl: './research-list.component.html',
  styleUrls: ['./research-list.component.scss']
})
export class ResearchListComponent implements OnInit {
  research : Research[] = ResearchList;
  // 存储按年份降序分组后的研究项目
  groupedResearch: {year: number, items: Research[]}[] = [];

  constructor() { }

  ngOnInit(): void {
    // 按年份分组
    const yearGroup = new Map<number, Research[]>();
    this.research.forEach(item => {
      if (!yearGroup.has(item.year)) {
        yearGroup.set(item.year, []);
      }
      yearGroup.get(item.year)!.push(item);
    });
    // 转为数组并按年份从大到小排序
    this.groupedResearch = Array.from(yearGroup.entries())
      .map(([year, items]) => ({ year, items }))
      .sort((a, b) => b.year - a.year);
  }
}

2. 修改 HTML 模板遍历分组数据 #

<div class="section">
  <div *ngFor="let group of groupedResearch">
    <div class="header">
      <div class="label">
         {{group.year}}
      </div>
    </div>

    <table>
      <tr *ngFor="let re of group.items">
        <div class="content" fxLayout="row wrap" fxLayout.xs="column" fxLayoutGap="100px">
          <div class="research">
            <span class="title">
              {{re.title}}
            </span>
            <span class="obliqueDesc">
              {{re.obliqueDesc}}
            </span>
            <div class="members">
              {{re.members}}
            </div>
          </div>
          <div class="picture" fxFlex="50" fxFlex.xs="100">
            <div class="image">
              <img src="{{re.image}}" alt="{{re.title}}">
            </div>
          </div>
        </div>
      </tr>
    </table>
  </div>
</div>

额外说明 #

如果确实需要在模板条件不满足时执行逻辑，不要把状态修改操作直接写在模板表达式里，可以把方法绑定到用户交互事件（比如点击事件）上，或者在组件生命周期钩子中提前处理好所有状态。

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