Angular中*ngFor多次执行及AfterViewInit中offsetTop为0的问题

一、*ngFor中方法多次执行的原因 #

• Angular的变更检测机制会在多个场景下触发（比如组件初始化、用户交互、异步操作完成等），每次变更检测时，模板中的所有表达式（包括{{printItem(chat)}}这类方法调用）都会重新执行。
• 默认的变更检测策略是Default，这种策略下，Angular会在每次事件循环中检查组件及其子组件的变更，即使chats数组没有变化，也可能触发变更检测，导致循环内的方法重复执行。
• *ngFor在变更检测时会遍历数组的每一项，每遍历一个项就会执行一次绑定的方法，再加上多次变更检测，就会出现多次打印的情况。

解决方案 #

• 避免在模板中直接调用方法，提前在组件内预处理数据：

// 组件内预处理
ngOnInit() {
  this.chats = this.chats.map(chat => ({...chat, displayText: this.getPrintText(chat)}));
}

getPrintText(chat: any) {
  console.log('chat', chat.id);
  return `处理后的内容${chat.id}`;
}

模板中直接使用属性：

<ul *ngFor="let chat of chats">
  <div id="chat{{chat.id}}">{{chat.displayText}}</div>
</ul>

• 切换变更检测策略为OnPush，只有当输入属性变化或组件内触发手动变更检测时，才会执行变更检测：

import { ChangeDetectionStrategy, Component, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  changeDetection: ChangeDetectionStrategy.OnPush // 添加这行
})
export class HomePage implements AfterViewInit {
  // ... 其他代码
}

二、AfterViewInit中offsetTop为0的原因 #

• ngAfterViewInit钩子触发时，组件的DOM结构已经创建完成，但浏览器的**布局计算（Layout）**可能还未完成。offsetTop是基于元素在页面中的布局位置计算的，需要等待浏览器完成样式计算和布局后才能得到正确值。
• Angular的视图初始化完成并不等同于浏览器完成了渲染流程，DOM构建完成后，浏览器还需要时间计算样式、布局元素，这时候直接获取offsetTop会得到初始值0。

解决方案 #

• 使用setTimeout延迟获取，让浏览器有足够时间完成布局：

ngAfterViewInit() {
  console.log('after view init');
  setTimeout(() => {
    let chat: HTMLElement|null = document.querySelector("#chat3");
    console.log('offsetTop', chat?.offsetTop);
  }, 0); // 0延迟会让代码进入下一次事件循环，等待布局完成
}

• 或者使用requestAnimationFrame，确保在浏览器下一次重绘前获取布局信息：

ngAfterViewInit() {
  console.log('after view init');
  requestAnimationFrame(() => {
    let chat: HTMLElement|null = document.querySelector("#chat3");
    console.log('offsetTop', chat?.offsetTop);
  });
}

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