[西安|结业弟子]JS-刘思安|2020年05月27日的日报-技能树.IT修真院

发表于： 2020-05-27 22:44:35

1 1772

今日完成

完成上下架编辑及删除功能

并添加互动效果

明日计划

添加登出功能，

修改bug 并测试功能

细节优化

成果展示

上下架删除功能

编辑功能

●弹窗使用nz-zooro的模态框组件

import { NzModalService } from 'ng-zorro-antd/modal';
private modalService: NzModalService,
    

通过modalService创建模态框

通过modal.afterClose设置窗口关闭后的回调函数 setTimeOut设置定时销毁模态框

  // 弹窗
 success(): void {
    const modal = this.modalService.success({
      nzTitle: '操作成功',
      nzContent: '弹窗将在2s后关闭',
    })
    modal.afterClose.subscribe(() => this.ngOnInit())
    setTimeout(() => modal.destroy(), 2000)
  }

● 确认框的使用以及编辑功能思路

html 将id进行参数传递

<button
          class="btn btn-outline-primary btn-sm m-1"
          (click)="editArticle(articleList.id)"
            >
              编辑
</button>
<button
              class="btn btn-outline-primary btn-sm m-1"
              nz-popconfirm
              nzPopconfirmTitle="确定要删除吗?"   
              (nzOnConfirm)="deleConfirm(articleList.id)" //点击确认后执行的方法
              nzPopconfirmPlacement="left" //弹出框的方向
            >
              删除
</button>

点击确认后执行service方法

  // 删除  确认
  deleConfirm(id): void {
    console.log(id)
    this.articleService.delArticle(id)
      .subscribe(
        (res: any) => {
          if (res.code == 0) {
            this.success();
          } else {
            this.error();
          }
        })
  }
  //编辑Article
  editArticle(id) {
    this.articleService.getThisArticle(id)
      .subscribe(
        (res: any) => {
          if (res.code == 0) {
            // 将获取到的article数据存在servic
            this.articleService.oldArticleData = res.data.article;
            // 页面跳转
            this.router.navigate(['/article/detail']);
          }
        }
      )
  }

service

 /* 删除 article */
  delArticle(id) {
    return this.http.delete('api/a/u/article/' + id)
  }

 /* 编辑 article */
editArticle() {
    // 数据转换
    let putData: string = '';
    for (let key in this.oldArticleData) {
      putData += key + '=' + this.oldArticleData[key] + '&';
    }

    return this.http.put('api/a/u/article/' + this.oldArticleData.id, putData, this.httpOptions)

  }

进入新增/编辑页面后在ngOnInit生命钩子中加入判断条件

 ngOnInit(): void {
    if (this.articleService.oldArticleData) {
      // 遍历对象 将表单中属性对应的值替换为service中对应的属性值
      this.replaceValue(this.editInfo, this.articleService.oldArticleData);
    }
  }

通过对象遍历将双向绑定的表单数据设置为被保存在service中的被编辑article数据

  // 找出对象A、B相同的属性，并B中的属性值赋值给A
  replaceValue(ObjA, ObjB) {
    for (let keyA in ObjA) {
      for (let keyB in ObjB) {
        if (keyA == keyB) {
          ObjA[keyA] = ObjB[keyB] + ''
        }
      }
    }
  }

上线存草稿按钮也添加判断条件切换为put请求

并且将修改的数据同步至service

// 上线 存草稿 
  submitArticle(status) {
    this.editInfo.status = status;

    // 新增article
    if (!this.articleService.oldArticleData) {
      // post请求
      this.articleService.addArticle(this.editInfo)
        .subscribe((res: any) => {
          console.log(res)
          if (res.code == 0) {
            this.subSuccess();
          } else {
            this.subError();
          }
        })
    }
    // 修改article 
    else {
      // 合并数据 
      this.replaceValue(this.articleService.oldArticleData, this.editInfo)

      // put请求
      this.articleService.editArticle()
        .subscribe(
          (res: any) => {
            console.log(res)
            if (res.code == 0) {
              this.subSuccess();
            } else {
              this.subError();
            }
          }
        )
    }
  }