发表于： 2020-07-06 23:35:22
1 2321
今天完成的事情：今天写了任务的删除的部分
明天计划的事情：继续后续的任务
遇到的问题：分页出现了一点奇怪的bug刷新页码无法保留
收获：整理了一下请求的内容以及部分逻辑
今天写了删除部分的代码
<nz-table [nzData]="responseData" [nzFrontPagination]="false" [nzLoading]="loading" [nzTotal]='totalNum'
[nzPageSize]="sizeNum" [(nzPageIndex)]='savePagebug' (nzPageIndexChange)="change($event)">
<!-- 第一个不绑定"bbb",页面下方就会出现暂无数据空白，剩下几个是page分页用到的 -->
<thead>
<tr>
<th>ID</th>
<th>名称</th>
<th>类型</th>
<th>图片</th>
<th>发布时间</th>
<th>修改时间</th>
<th>发布者</th>
<th>状态</th>
<th class="operate">操作</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of responseData">
<td>{{ item.id }}</td>
<td>{{ item.title }}</td>
<td>{{ item.type| type }}</td>
<td><img src="{{ item.img }}" style="width: 100px; height: 100px;"></td>
<td>{{ item.createAt | date:'yyyy-MM-dd' }}</td>
<td>{{ item.updateAt | date:'yyyy-MM-dd' }}</td>
<td>{{ item.author }}</td>
<td>{{ item.status| status }}</td>
<td style="display: flex;align-items: center;justify-content: space-around;height: 133px;">
<a nz-popconfirm [nzTitle]="item.status === 2?'确定下线?':'确定上线？'" nzPopconfirmPlacement="top"
(nzOnConfirm)="confirm(item.id,item.status)" >{{item.status === 2?'下线':'上线'}}</a>
<nz-divider nzType="vertical"></nz-divider>
<a (click)="edit(item.id)">编辑</a>
<nz-divider nzType="vertical"></nz-divider>
<a nz-popconfirm nzTitle="确定删除?" nzPopconfirmPlacement="top" (nzOnConfirm)="delete(item.id)" >删除</a>
</td>
</tr>
</tbody>
</nz-table>
删除的函数
delete(id) {
console.log(id)
this.ser.deleteData(id).subscribe((res: any) => {
console.log(res)
if (res.code == 0) {
this.getTable(this.savePage)
}
})
}
封装的删除请求
deleteData(params) {
return this.http.delete(
`${this.Url}/${params}`
)
}
逻辑上来说很简单，层层调用就可以了
实际效果
点击删除
点击确定
删除成功
想清楚删除的请求格式
`${this.Url}/${params}`
就可以很好的请求了
解决了一个分页bug
//分页刷新的页码bug修复，无参数时默认第一页
if (!Boolean(this.savePage.page)) {
this.savePagebug = 1
}
else {
this.savePagebug = this.savePage.page
}
最初的页面没有参数但是进入后面的页面传进了参数再刷新页面会保留参数但是分页的页码会重新回到第一页
先给最初没参数的页码绑定第一页，然后在后续绑定页码即可
返回列表
评论