Question

我构建了一个模态，当出现错误时会出现。我正在基于包含所有错误消息的数组显示消息正文。

HTML：

<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;>
      {{fetchMessage()}}
    </div>
  </div>
</div>

TS文件：

fetchMessage()
{
var msg :string[] = [];
msg = this.getErrorMessage(this.messages); //this returns list of errors 
for(var i=0;i<msg.length;i++)
{
  var element:any = document.createElement("p"); 
   element.innerHTML =  msg[i]+'\n';
  document.getElementById("msgBody").appendChild(element)

 }
 }

问题是错误消息重复了4次（即使数组仅返回1个项目），并且每次我关闭并查看弹出模式时它都会成倍增加。不知道我在做什么错。

Answer 1

尝试将代码更改为：-

1。如果您真的想在模板中调用方法：-

TS：-

fetchMessage()
{
var msg :string[] = [];
var msgBody = document.getElementById("msgBody");
msg = this.getErrorMessage(this.messages); //this returns list of errors 
msgBody.innerHTML="";
for(var i=0;i<msg.length;i++)
{
  var element:any = document.createElement("p"); 
   element.innerHTML =  msg[i]+'\n';
   msgBody.appendChild(element)

 }
 }

2。更好的方法

HTML：-

<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 message of msg">{{message}}</p>
    </div>
  </div>
</div>

TS：-

public msg: string[] = [];
ngOnInit() {
  this.fetchMessage();
}
fetchMessage(){
  this.msg = this.getErrorMessage(this.messages); 
}

Answer 2

因为每次迭代都在循环中.....最好的解决方案是从循环中删除

显示错误消息两次

2 个答案: