Angular中ngOnChanges()数据更新后不生效的问题排查

核心原因 #

Angular的NgOnChanges钩子仅会检测输入属性的引用变化，而非对象内部的值变化。当你点击同一表格行时，clickedElement被赋值为同一个row对象，引用并未发生改变，因此ngOnChanges不会被触发；只有点击不同行时，row是全新的对象，引用变化才会触发钩子执行。

解决办法 #

方案一：修改赋值逻辑，生成新对象引用

在组件1的点击事件中，通过扩展运算符创建新对象，强制改变引用，这样无论点击哪一行都会触发NgOnChanges：

<tr mat-row *matRowDef="let row; columns: displayedColumns"
    class="single-row" (click) = "clickedElement = {...row}">
</tr>

方案二：通过模板引用直接调用组件方法

如果需要保留原对象引用，可在组件2中暴露更新方法，组件1点击时直接调用：

组件2代码：

export class TransactionDetailsComponent {
  @Input() clickedElement?: Transaction
  possibleBalance = ""

  updatePossibleBalance(): void {
    this.possibleBalance = this.getPossibleBalance()
  }
}

组件1模板：

<div class="container-right">
  <app-transaction-details #detailComp [clickedElement]="clickedElement"></app-transaction-details>
</div>

<tr mat-row *matRowDef="let row; columns: displayedColumns"
    class="single-row" (click) = "clickedElement = row; detailComp.updatePossibleBalance()">
</tr>

方案三：使用ngDoCheck自定义检测逻辑

实现DoCheck接口，手动对比对象的唯一标识（比如ID）来判断是否需要更新，也可以强制每次点击都执行逻辑：

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

export class TransactionDetailsComponent implements DoCheck {
  @Input() clickedElement?: Transaction
  possibleBalance = ""
  private lastElementId?: number;

  ngDoCheck(): void {
    if (this.clickedElement) {
      // 仅当元素ID变化时触发（不同行）
      if (this.clickedElement.id !== this.lastElementId) {
        this.possibleBalance = this.getPossibleBalance()
        this.lastElementId = this.clickedElement.id;
      }
      // 若同一行点击也需要触发，直接执行下面代码
      // this.possibleBalance = this.getPossibleBalance()
    }
  }
}

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