Nodemailer场景下，如何在Angular HTML遍历JSON展示前后键值对？

以下是针对你问题的具体排查步骤和解决方案：

一、先确认组件数据处理是否正确 #

首先确保从Nodemailer传递的JSON数据已正确赋值给组件的公开变量（Angular模板只能访问public成员），示例组件代码：

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

@Component({
  selector: 'app-mail-change-display',
  templateUrl: './mail-change-display.component.html'
})
export class MailChangeDisplayComponent {
  // 从Nodemailer接收的变更数据（确保是public）
  changeRecord = {
    Previous: {
      username: "alice_old",
      phone: "13800138000",
      permission: "read"
    },
    Current: {
      username: "alice_new",
      phone: "13800138000",
      permission: "write"
    }
  };

  // 可选：保持原始键顺序的排序函数（默认keyvalue会按字母排序）
  keepOriginalOrder = (a: any, b: any) => 0;
}

二、正确的Angular HTML模板写法 #

根据需求提供两种展示方案：

方案1：分别展示Previous/Current的所有键值对 #

<h3>数据变更明细</h3>

<div class="prev-container">
  <h4>变更前值</h4>
  <ul>
    <!-- 用*ngIf先判断数据是否存在，避免空指针 -->
    <li *ngFor="let item of changeRecord.Previous | keyvalue:keepOriginalOrder">
      <strong>{{item.key}}:</strong> {{item.value}}
    </li>
  </ul>
</div>

<div class="curr-container">
  <h4>变更后值</h4>
  <ul>
    <li *ngFor="let item of changeRecord.Current | keyvalue:keepOriginalOrder">
      <strong>{{item.key}}:</strong> {{item.value}}
    </li>
  </ul>
</div>

方案2：并排对比有变更的键值对（更直观） #

<h3>数据变更对比</h3>
<ul *ngIf="changeRecord">
  <li *ngFor="let item of changeRecord.Previous | keyvalue:keepOriginalOrder">
    <strong>{{item.key}}</strong>：
    <span style="color:#999">{{item.value}}</span>
    →
    <span style="color:#2ecc71">{{changeRecord.Current[item.key]}}</span>
  </li>
</ul>

三、排查常见导致空白的问题 #

1. 变量访问权限问题：确保changeRecord是组件的public变量，private变量无法被模板访问。
2. 异步数据未处理：如果数据是异步获取（比如从Nodemailer回调、API接口），需要用*ngIf判断数据是否加载完成，或配合async管道：

   <!-- 假设changeRecord$是Observable类型 -->
   <div *ngIf="changeRecord$ | async as changeRecord">
     <!-- 上述列表代码 -->
   </div>
   

3. 数据结构错误：确认Previous/Current是对象类型，而非数组或null/undefined，keyvalue管道仅对对象生效。
4. keyvalue管道排序问题：如果默认排序导致键顺序混乱，可使用自定义排序函数（如上面的keepOriginalOrder）。

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