Angular 10插值表达式引发组件异常更新问题

你遇到的问题核心在于模板中调用的getCrewDiagram方法带有副作用——它不仅返回对应ID的CrewDiagram实例，还直接修改了DiagramSetService中的全局状态crewDiagram。结合Angular的变更检测机制，每次组件触发变更检测时（比如页面初始化、数据更新、点击事件后），*ngFor循环里的getCrewDiagram(passRide.id)都会被执行一遍。循环结束后，crewDiagram会被设置为最后一个passRide.id对应的实例，这就导致不管你点击哪个.passRide元素，Viewer组件都会显示最后一条数据。

当你移除那个调用getCrewDiagram的<p>标签时，这个副作用消失了，crewDiagram只会在点击事件触发的updateViewer方法中被修改，功能自然恢复正常。

我们需要把数据查询和状态修改的逻辑彻底分离，同时避免在模板中调用带有副作用的函数，具体步骤如下：

1. 修复DiagramSetService中的方法 #

先调整服务里的方法，让查询和状态修改职责单一：

// diagram-set-service.ts
getCrewDiagram(id: number): CrewDiagram{
  console.log("getCrewDiagram" + id);
  // 只做纯查询，不修改全局状态
  return this.crewDiagrams.find(diagram => diagram.id === id);
}

setCrewDiagram(id: number): void {
  // 先查询目标实例，再更新全局状态
  const targetDiagram = this.getCrewDiagram(id);
  if (targetDiagram) {
    this.crewDiagram = targetDiagram;
    console.log("setCrewDiagram" + id);
  }
}

2. 在组件中提前关联数据（避免模板调用函数） #

Angular模板中调用函数会在每次变更检测时执行，既影响性能又容易引发副作用。我们可以在组件中提前把passRide和对应的CrewDiagram关联好：

// selector.ts
import { Component, OnInit, OnChanges, SimpleChanges } from '@angular/core';
// ... 其他导入

export class SelectorComponent implements OnInit, OnChanges {
  // 存储关联后的passRide和对应diagram
  passRideWithDiagram: Array<{passRide: CrewPuzzlePiece, diagram: CrewDiagram}> = [];

  constructor(public context: DiagramSetService) { }

  ngOnInit() {
    this.preparePassRideData();
  }

  // 监听passRides变化，实时更新关联数据
  ngOnChanges(changes: SimpleChanges) {
    if (changes.context?.currentValue) {
      this.preparePassRideData();
    }
  }

  private preparePassRideData() {
    const passRides = this.context.getPassRides();
    if (passRides) {
      this.passRideWithDiagram = passRides.map(passRide => ({
        passRide,
        diagram: this.context.getCrewDiagram(passRide.id)
      }));
    }
  }

  updateViewer(index: number) : void {
    this.context.setCrewDiagram(index);
  }
}

3. 修改模板，直接使用关联数据 #

把模板里的循环改成遍历提前处理好的数组，直接访问属性而非调用函数：

<!-- selector.htm -->
<div id="passes">
 <div class="passRide" *ngFor="let item of passRideWithDiagram;" (click)="updateViewer(item.passRide.id)">
 <p>{{ item.diagram.header.diagNumber }}</p>
 <table>
 <tr *ngFor="let event of item.passRide.events">
 <td>{{ event.activity.diagramActivity }}</td>
 <td>{{ event.noteLine ? event.note : (event.reliefLine ? event.reliefs : event.location.shortDesc) }}</td>
 <td>{{ event.activity.diagramActivity == "DEP" || event.activity.diagramActivity == "ARR" ? event.eventTime : ""}}</td>
 <td>{{ event.activity.diagramActivity == "DEP" ? event.wttid : ""}}</td>
 </tr>
 </table>
 </div>
</div>

• 尽量避免在Angular模板中调用方法，优先使用属性绑定，这能提升性能并减少意外副作用。
• 服务中的方法要保持职责单一：查询方法只做查询，状态修改方法只做修改，这样代码更易维护和调试。

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