Expression has changed after it was checked value

Question

Expression has changed after it was checked. Previous value: 'ngIf: false'. Current value: 'ngIf: true'

<div class="editable comment-msg" *ngIf="c_editId == c.id"> 
 <form [formGroup]="editCommentForm" class="edit-form">
    <div class="edit-message">
      <textarea
        rows="3"
        type="text"
        class="form-control"
        formControlName="message"
        placeholder="Enter Comment "
        value="{{ c.message }}"
        maxlength="1024"
        #message>
      </textarea>
    <div class="custom-content-padding">
     <small class="form-text text-muted custom-display">
      <code>{{ message.value.length }}</code> of 1024 characters
     </small>
    <span *ngIf="message.value.length != 0" class="alert-success">
       <i class="fa fa-check" aria-hidden="true"></i> Your edit is good to go!
    </span>
  </form>
 <div>
 ...

---

this.commentForm = this.formBuilder.group({
    topicId: [this.topicId, Validators.required],
    message: [
      "",
      Validators.compose([Validators.required, Validators.maxLength(1024)])
    ]
  });

  this.editCommentForm = this.formBuilder.group({
    message: [
      "",
      Validators.compose([Validators.required, Validators.maxLength(1024)])
    ]
  });
  this.getCommentsCommentPage();
});



  editCommentToggle(c: Comment) {

   this.attachments2 = [];
   var id = String(c.id)
   document.getElementById(id).style.display = "none";

   this.setTitleEdit = true;
   this.c_editId = c.id;
   this.comment = c;
   this.deleteFilesCheckboxes.length = 0;

   if (this.filepath[c.id] != null) {
    for (let file of this.filepath[c.id]) {
     this.deleteFilesCheckboxes.push(new FileToCheckbox(false, file));
     }
   }
}

When the edit button above a comment is clicked the *ngIf statement in line 1 becomes true. A comment in editing will always start with at least one character in it.

The second *ngIf is where the problem lies. The above error is displayed but the code runs fine. I have seen other posts with similar error titles but cannot apply the error or fix to my problem.

Answer 1

My guess is that your setTitleEdit has some checking issues.

To fix this add ChangeDetectorRef in to your constructor

constructor(private changeRef: ChangeDetectorRef)

And then call the detectChanges under setTitleEdit

editCommentToggle(c: Comment) {

   this.attachments2 = [];
   var id = String(c.id)
   document.getElementById(id).style.display = "none";

   this.setTitleEdit = true;
   this.changeRef.detectChanges();
   this.c_editId = c.id;
   this.comment = c;
   this.deleteFilesCheckboxes.length = 0;

   if (this.filepath[c.id] != null) {
    for (let file of this.filepath[c.id]) {
     this.deleteFilesCheckboxes.push(new FileToCheckbox(false, file));
     }
   }
}