Question

我使用离子2开发聊天应用程序。这是我的HTML代码

<ion-content padding>

  <div *ngIf="online === true">
      <ion-refresher (ionRefresh)="onPullOldMessages($event)">
          <ion-refresher-content></ion-refresher-content>
      </ion-refresher>
    <div class="chat" *ngIf="chatval">
      <div class="messagesholder" 
      *ngFor="let chat of chatval | orderby:'[date]';  let i = index;let first=first;let last = last;">

             <div *ngIf="chat.sender == currentuser || chat.receiver == currentuser" >
                   <p class="chat-date"   id="abc" #abc>{{chat.date | amDateFormat:'LL'}}</p>
                   {{checkdate(chat.date)}} 
              </div> 

         <div class="message" *ngIf="chat.sender == currentuser || chat.receiver == currentuser" [ngClass]="{'me': currentuser == chat.sender}">
                <div class='image' *ngIf="chat.path" >
                  <img *ngIf="chat.path" [src]="chat.path" imageViewer/><br>
                  <span *ngIf="chat.path_text">{{chat.path_text}}</span>
                  <span style="font-size:9px;">{{chat.date | amDateFormat:'hh:mmA'}}</span>
                </div> 
                 <div *ngIf="chat.message_text">
                 <span>{{chat.message_text}}</span>
                 <span style="font-size:9px;">{{chat.date | amDateFormat:'hh:mmA'}}</span>
                 </div>
          </div>
     </div>
   </div>  
 </div>
</ion-content>

工作正常。显示聊天消息。但我需要显示相同的日期值，因为我调用了checkdate(chat.date)。

这是我的功能

checkdate(date)
  {
    var res = date.split(" ");
    var A=res[0];
    var local=localStorage.getItem('chatdate');
    this.msgdate="";
    if(local === undefined || local === null)
    {
      this.msgdate=A;
      localStorage.setItem('chatdate',this.msgdate);

    }
    else if(local !== undefined)
    {
      console.log(local != A);
      if(local != A)
      {

        this.msgdate = A;
         localStorage.setItem('chatdate',this.msgdate);
      }
    }
   console.log("date value");
   }

实际上数组长度是3.但是这个函数调用了很多次。我被检查了这个函数调用了多少次。因为我只是安慰了字符串值。它安慰了很多次，就像100次一样。

如何重复停止调用函数？

Answer 1

原因是您从模板中调用该函数：

{{checkdate(chat.date)}}

这是你真正想要避免的，因为在模板中有函数，意味着每次运行更改检测时都会执行它们。在最坏的情况下，这会导致无限循环。

所以建议重构你的代码，你处理组件中的逻辑，将它分配给变量，并在模板中使用变量。

Ng for call函数

1 个答案: