今天完成的事情：

完成编辑页面

明天计划的事情：

完成查看

准备小课堂
遇到的问题：

不知道如果通过ANGULAR插入css样式让按钮消失
收获：

富文本编辑器

富文本编辑器有很多种

quill——功能强大，还可以编辑公式等

界面截图：官网地址

simditor——界面美观，功能较全。（个人博客考虑使用）

界面截图：官网地址(网址打开较慢)

summernote——UI好看，精美

界面截图：官网地址

quill在angular应用

第一步：

安装依赖

 // 安装 quill
 npm install quill -save

 // 安装 ngx-quill
 npm install ngx-quill -save

第二步在对应的模块中引入QuillModule模块

 import { QuillModule } from 'ngx-quill';
 imports: [
     QuillModule
   ]

第三步在index.html引入CSS

 <link href="https://cdn.quilljs.com/1.2.2/quill.snow.css" rel="stylesheet">

然后就可以直接应用了

<quill-editor></quill-editor>

效果：

分页功能

分页一般都是后台数据跟你写完后给你个文档，当然少数情况下是自己写不过一般为了优化都是后台帮你写完。

后端最少要给你

page: any;//页码查找

pages: any; //总页数

total: any; //总页码数

pageNum: any //当前页码

size: any; //当前页码显示

最少会给你这几个数

在这之前你要先写好接口

import {
  HttpClient,
  HttpHeaders
} from '@angular/common/http';
 constructor(
    private http:HttpClient
  ) { }
要先声明一个http
getData(data){
    return this.http.get(写接口,传数据,请求头)
  }
接口要看你自己的文档

soap(params ? : any) {
    this.service.getData(params).subscribe((response: any) => {
     
      console.log(response);

      

    })
  }
  //通过回传的数据进行打印出来看都有哪些数据具体在用那个

<nz-table 
  #basicTable 
  [nzData]="listOfData"
  [nzFrontPagination]= "false"
  [nzTotal]="total"
  ([nzPageIndex])="pageNum"
  [nzLoading]="loading"
  (nzPageIndexChange)="PageIndexChange($event)"
  >
    //angular UI组件库可以直接用
    一般有2个方法
    第一关方法就是直接通过
      ([nzPageIndex])绑定页面来进行数据调试然后把得到页面可以直接专递过去。
    第二个方法是
    (nzPageIndexChange)
    通过页面返回函数来进行调试页面。得到页面直接传递数据给后台来显示当前页面的数据状态.

然后在angular上面把它们进行引入。

上传图片

遇到问题：

 <nz-upload
                  nzAction="/api/picture/"
                  nzListType="picture-card"
                  [(nzFileList)]="image"
                  [nzShowButton]="image.length < 1"
                  [nzShowUploadList]="showUploadList"
                  [nzPreview]="handlePreview"
                  (nzChange)='Change($event)'
                >
     
 
   

这个问题涉及到 什么栈  堆一些问题，当你的图片上传的时候 image变量里面的数据是不能改变的比如

 Change(e) {
    console.log(e);
    // console.log(this.data)
    

    if (e.type == "success") {

      // this.data.image[0] = e.fileList[0];
      console.log(this.image)
    }



  }

也就是说要单独值专门存储这个调回的函数不要动它。然后在你要处理数据的地方在它图片路径进行直接赋值如

this.data.image=this.image[0].response.data

这后面的图片路径需要你打印出来然后在进行赋值 这样就不会改变image里面的值了。