模态框错误消息重复显示且每次打开数量倍增的问题排查

你遇到的重复显示+次数倍增问题，核心原因有两个：

1. 模板方法被频繁触发：Angular的变更检测机制会反复执行模板里的{{fetchMessage()}}，每次执行都会往msgBody里追加新的<p>元素，哪怕只有一条错误，也会因为多次执行重复显示。
2. 旧内容未清空：关闭模态框后，msgBody里的错误元素并没有被移除，下次打开模态框时会继续追加新元素，导致显示次数成倍增加。

下面给你两种解决方案，推荐第一种（更符合Angular的开发规范）：

方案一：用Angular数据绑定渲染（推荐） #

这种方式避免直接操作DOM，利用Angular的模板语法实现可控渲染，代码更简洁也更易维护。

1. 组件中维护错误消息数组 #

// 组件类中定义存储错误的数组
errorMessages: string[] = [];

// 加载错误消息的方法，打开模态框时调用
loadErrorMessages() {
  this.errorMessages = []; // 先清空旧数据
  // 获取最新错误消息并赋值
  this.errorMessages = this.getErrorMessage(this.messages);
}

2. 修改模板代码 #

替换掉原来的{{fetchMessage()}}，用*ngFor循环渲染数组内容：

<div class="popup_modal">
  <div class="content" style="width: 28em;">
    <div class="header" style="height: 5em;">
      <p>Error Details.</p>
    </div>
    <div id="msgBody" class="body" style="height: 40vh;">
      <p *ngFor="let err of errorMessages">{{err}}</p>
    </div>
  </div>
</div>

3. 触发加载方法 #

在打开模态框的操作中调用loadErrorMessages()，比如按钮点击事件：

<button (click)="openModal(); loadErrorMessages()">查看错误详情</button>

方案二：修复原DOM操作方式 #

如果你坚持用直接操作DOM的写法，需要做两个关键修改：

1. 每次执行前清空容器 #

在fetchMessage开头先清空msgBody的内容，避免旧元素残留：

fetchMessage() {
  const msgBody = document.getElementById("msgBody");
  if (!msgBody) return;
  
  msgBody.innerHTML = ''; // 清空旧内容
  
  const msg: string[] = this.getErrorMessage(this.messages);
  for(let i=0;i<msg.length;i++) {
    const element = document.createElement("p");
    element.textContent = msg[i]; // 用textContent更安全，避免XSS风险
    msgBody.appendChild(element);
  }
}

2. 避免模板中直接调用方法 #

不要在模板里写{{fetchMessage()}}，而是在打开模态框时手动调用这个方法，确保只执行一次：

<button (click)="openModal(); fetchMessage()">查看错误详情</button>

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