在Angular模板中调用Map.get('key1')，变更检测会每次循环检查值吗？

1. Angular对Map.get('key1')的执行行为 #

没错，Angular处理模板里的myMap.get('key1')时，和调用普通函数的逻辑完全一致——每次变更检测循环都会执行这个get方法。

原因很直接：Angular的变更检测只能追踪对象引用的变化，没法感知Map内部键值对的修改。哪怕你只是修改了Map里某个key对应的值，只要Map本身的引用没改变，Angular就没法直接知道内部发生了变化。为了确保模板显示的是最新值，它只能在每次变更检测时都调用get方法，对比返回值是否变化。

2. 自行测试该行为的方法 #

你可以用以下简单步骤验证：

• 第一步：在组件类里定义Map，给Map.get方法添加日志（或直接重写方法）：

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

@Component({
  selector: 'app-test',
  template: `
    <ng-container *ngIf="myMap.get('key1')">
      内容显示中
    </ng-container>
    <button (click)="triggerChangeDetection()">触发变更检测</button>
  `
})
export class TestComponent {
  myMap = new Map<string, boolean>([['key1', true]]);
  dummy = false;

  constructor() {
    // 重写get方法，添加调用日志
    const originalGet = this.myMap.get.bind(this.myMap);
    this.myMap.get = (key: string) => {
      console.log(`Map.get('${key}')被调用了`);
      return originalGet(key);
    };
  }

  triggerChangeDetection() {
    // 修改无关属性，强制触发变更检测
    this.dummy = !this.dummy;
  }
}

• 第二步：运行项目，打开浏览器控制台，点击页面上的“触发变更检测”按钮。你会看到每次点击，控制台都会打印Map.get('key1')被调用了——这就证明每次变更检测都执行了get方法。

另外还有更简单的方式：不用重写方法，直接在模板里通过辅助函数打印：

<ng-container *ngIf="logAndReturn(myMap.get('key1'))">
  内容显示中
</ng-container>

组件类里添加辅助方法：

logAndReturn(value: any) {
  console.log('Map.get返回值:', value);
  return value;
}

同样点击触发按钮，观察控制台打印频率，就能确认每次变更检测都会执行get。

内容的提问来源于stack exchange，提问作者José Bate