RangeError: Maximum call stack size exceeded angular 2

Question

I am using ionic 2

Here is my code....

<div class="messagesholder" 
      *ngFor="let chat of chatval | orderby:'[date]'; let i = index;let first=first;let last = last;">
           {{last ? callFunction() : ''}} 

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

</div>

Here is my checkdate function

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);
      }
    }

   }

    callFunction(){
    this.content.scrollToBottom(0)
  }

It's work.But I getting this error.

FIREBASE WARNING: Exception was thrown by user callback. Error: Expression has changed after it was checked. Previous value: 'April 10, 2017'. Current value: ''.

Because I go this working by having these lines in my code :

constructor(private cdRef: ChangeDetectorRef) {}

ngAfterViewChecked() {
//explicit change detection to avoid "expression-has-changed-after-it-was-checked-error"
this.cdRef.detectChanges();
}

But Now I am getting this error

database.js:62 FIREBASE WARNING: Exception was thrown by user callback. RangeError: Maximum call stack size exceeded

You are calling detect changes that triggers after view checked which is calling detect changes, and so on. Move detect changes to ngAfterViewInit and see if it works. — unitario, Apr 16 '17 at 11:29
@unitario I used ngAfterViewInit But still get this same err — ANISUNDAR, Apr 16 '17 at 12:55
The problem is that change detection is activating the view which triggers `callFunction()` which in return active ngAfterViewChecked and your new round of change detection. I think you should have a look at your interpolation logic: `{{last ? callFunction() : ''}}` and move that out of the template. As a suggestion you could create a directive containing your call function and pass `last` as `@Input` which will execute the `callFunction` if `last` is true. More information here: http://stackoverflow.com/questions/40080541/function-is-getting-called-many-times-by-using-template-interpolation — unitario, Apr 16 '17 at 13:52
Ok so simply put: remove callFunction() out of your template syntax. I believe that is what is causing your problem. — unitario, Apr 16 '17 at 19:52
@unitario.I removed callFunction().But Still I am getting this err Exception was thrown by user callback. Error: Expression has changed after it was checked. Previous value: 'April 10, 2017'. Current value: ''.Pls kindly help me....I have no idea... : ( — ANISUNDAR, Apr 17 '17 at 04:24

RangeError: Maximum call stack size exceeded angular 2

0 Answers0