angular model数据变化 但是视图变

发布于 2022-09-11 19:04:17 字数 2032 浏览 17 评论 0

现在的需求是这样的 需要在行内做备注的修改
我在获得数据的时候给每个item加了is_desc_edit_icon和is_desc_edit用来隐藏显示修改icon和修改form
修改成功就把form隐藏 并替换这个data数组 中的item
打印data确实修改了 但是 视图没刷新 form 没隐藏

  <td>
          <div class='w100' (mouseenter)='showEditIcon(item)' (mouseleave)='hideEditIcon(item)'>
            <span *ngIf='!item.is_desc_edit&&item.description==""'>--</span>
            <span *ngIf='!item.is_desc_edit&&item.description!=""'>{{item.description}}</span>
            <i nz-icon nzType="form" nzTheme="outline" (click)='showEditDesc(item,i)' style='margin-left:6px' *ngIf='item.is_desc_edit_icon'></i>
          </div>
          {{item.is_desc_edit}}
          <form nz-form [formGroup]="editDesc" *ngIf='item.is_desc_edit'>
            <nz-form-item style='margin-bottom:0'>
              <nz-form-control>
                <input formControlName="description" autofocus='autofocus' style='width:140px' nz-input placeholder="备注" (blur)='editDescConfirm(item)'>
              </nz-form-control>
            </nz-form-item>
          </form>
        </td>
  // 确认修改备注
  async  editDescConfirm(item) {
    const data = await this.api.put(`packages/${item.id}`)({
      description: this.editDesc.value.description,
    })
    if (data.id) {
      this.data[this.item_index] = data;
      this.data[this.item_index]['is_desc_edit_icon'] = false;
      this.data[this.item_index]['is_desc_edit'] = false;
      this.editDesc.reset();
      console.log(this.data)
      this.changeDetectorRef.markForCheck();
      this.changeDetectorRef.detectChanges();
      // this.refresh();
    }
  }

打印data 中的is_desc_edit_icon和is_desc_edit都是false

clipboard.png
但是视图上没改变

clipboard.png
只是form reset了

能请问 这是为什么呢
应该如何处理呢

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

薄凉少年不暖心 2022-09-18 19:04:17

解决了 发现更新整个item 就不行 但是如果只更新description 就可以

  this.data[this.item_index].description = res.description;
  this.data[this.item_index].is_desc_edit_icon = false;
  this.data[this.item_index].is_desc_edit = false;
  this.editDesc.reset();
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文