Angular赋值后调用print()时打印预览不显示绑定数据

点击列表行的Print按钮触发onPrint方法时，预期在浏览器打印预览页展示当前点击行对应的人员姓名、描述信息，但实际预览中打印区域的两个绑定字段为空，无法正常显示内容。

原有核心实现代码如下：

onPrint(list: any) {
  this.selectedInfo = list;
  print();
}

<div *ngFor="let list of lists; trackBy: trackByFn">
  <td>
    {{ list.name }} -
    <button type="button" (click)="onPrint(list)">Print</button>
  </td>
</div>

<div id="printSection">
  <h1>SAMPLE HEADER TITLE</h1>
  <div>{{ selectedInfo.name }}</div>
  <div>{{ selectedInfo.description }}</div>
</div>

本质是执行时序问题：Angular 的 DOM 更新依赖变更检测机制，是异步执行的。原有代码在给selectedInfo赋值后立刻同步调用print()，此时当前轮变更检测还没跑完，绑定了人员信息的 DOM 节点还没更新成最新值，浏览器抓取打印内容时拿到的是字段未渲染的旧 DOM，最终导致预览页看不到对应人员信息。

核心逻辑是等视图完成更新后再触发打印动作，两种常用方案都可实现：

• 方案1：用setTimeout将打印操作延后到下一个事件循环执行，适配Angular默认的变更检测节奏，改造成本最低

onPrint(list: any) {
  this.selectedInfo = list;
  // 等当前变更检测周期结束、DOM更新完成后再触发打印
  setTimeout(() => {
    window.print();
  }, 0);
}

• 方案2：注入变更检测引用，手动触发检测确保视图更新后再打印，时序更可控，适合复杂组件场景
  首先在组件中引入并注入ChangeDetectorRef：

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

@Component({
  // 组件元数据保持原有配置即可
})
export class AppComponent {
  constructor(private cdr: ChangeDetectorRef) {}
  // 其余原有业务代码省略
}

再修改onPrint方法逻辑：

onPrint(list: any) {
  this.selectedInfo = list;
  // 手动触发变更检测，强制完成当前视图更新
  this.cdr.detectChanges();
  window.print();
}

补充优化提示：如果需要打印预览只展示printSection区域的内容、隐藏页面上的列表、按钮等无关元素，可以添加打印媒体查询样式：

@media print {
  body * {
    visibility: hidden;
  }
  #printSection, #printSection * {
    visibility: visible;
  }
  #printSection {
    position: absolute;
    inset: 0;
    width: 100%;
  }
}

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