【问题标题】:Expression has changed after it was checked value检查值后表达式已更改
【发布时间】:2020-05-01 11:41:48
【问题描述】:

表达式在检查后发生了变化。以前value: 'ngIf: false'。当前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));
     }
   }
}

当单击评论上方的编辑按钮时,第 1 行中的 *ngIf 语句变为真。编辑中的评论将始终以其中至少一个字符开头。

第二个*ngIf 是问题所在。显示上述错误,但代码运行正常。我看过其他具有类似错误标题的帖子,但无法应用错误或修复我的问题。

【问题讨论】:

  • 请同时包含该组件的打字稿代码
  • @JohnVelasquez 我认为 TS 在这种情况下没有用,但我还是添加了它

标签: html angular angular-ng-if


【解决方案1】:

我猜你的setTitleEdit 有一些检查问题。

要解决此问题,请将 ChangeDetectorRef 添加到您的构造函数中

constructor(private changeRef: ChangeDetectorRef)

然后调用setTitleEdit下的detectChanges

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

【讨论】:

  • 非常感谢。您放置 changeRef 的初始位置不起作用,所以我只是将它粘贴在函数中的每一行代码之后,它就起作用了。把它缩小到最后。非常感谢您的帮助
猜你喜欢
  • 2017-01-24
  • 1970-01-01
  • 2017-09-16
  • 2017-06-08
  • 2016-10-19
  • 2017-05-08
  • 1970-01-01
  • 1970-01-01
  • 2018-10-23
相关资源
最近更新 更多