angular model数据变化 但是视图变

现在的需求是这样的 需要在行内做备注的修改
我在获得数据的时候给每个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了

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

阅读 2.9k
1 个回答

解决了 发现更新整个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();
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进