发表于: 2017-06-07 22:07:37
2 1154
今天完成的事情
- 1. 用post请求的一波数据,成功的展示在页面上;
- 2. 随后写了个服务,get数据,显示,这个中间好多坑,坑的不要不要的。
看一下请求的代码:
//get-data.service.tspublic getData(url: string, page: number = 1, searchText?: string): Observable<any> {let params = new URLSearchParams();//其实我之前是不知道有这个`URLSearchParams`这个对象。。params.set('page', String(page));//是不是有参数if(searchText) {params.set('searchText', searchText);console.log(`searchText=${searchText}`);this.getFun = this.http.get(url, {search: params})}else {this.getFun = this.http.get(url);}return this.getFun.map(this.extractData).catch(this.handleError);}
这个服务写了个通用的post,希望在其他地方也可以用,所以,将接口全部写在了一个对象里面,待命:
let httpList = {get: {pullArticle: '/carrots-admin-ajax/a/article/search',},post: {addArticle: '/carrots-admin-ajax/a/u/article',addImg: '/carrots-admin-ajax/a/u/img/{module}'},put: {editArticle: '/carrots-admin-ajax/a/u/article/{id}'},//delete为关键字,所以用delete1delete1: {deleteArticle: '/carrots-admin-ajax/a/u/article/{id}'}};
当然,这个可能并不是所有接口,用的时候再加上去。
显示部分,现在是这个样子的:
<div class="table-response"><table *ngIf="articleList" class="table table-striped"><tr ><th *ngFor="let header of detailTittle.article">{{header}}</th></tr><tr *ngFor="let list of articleList.data.articleList; let i=index"><td>{{i + 1}}</td><td>{{list.title}}</td><td>{{list.type | industryPip}}</td><td>{{list.createAt | date: "y-MM-dd HH:mm:ss"}}</td><td>{{list.updateAt | date: "y-MM-dd HH:mm:ss"}}</td><td>{{list.author}}</td><td>{{list.status | statusPip}}</td><td><button class="btn btn-success btn-sm">{{list.status | statusOperate}}</button><button class="btn btn-primary btn-sm">编辑</button><button class="btn btn-danger btn-sm">删除</button></td></tr></table>
当然这并不是我想要的结果,理想的情况应该是,<td>
动态生成,但是每个模块用到的数据数量不同,名称不同,这可能需要多一个服务或者公共函数来处理这些数据:服务接受一个参数,根据这个参数来查表,确定使用哪个方法来处理数据,并将处理完的数据返回,最后页面渲染出来。讲真,这样觉得很爽。
但是为什么没有写成这样呢,是因为这个这个路由下面的功能没有处理完,其他模块返回的数据形式还不清楚,所以这个功能等到用到其他模块的时候再处理。想想还是有点复杂的。
明天计划的事情
- 1. 处理url传参:从
SearchComponet
传到DetailComponent
,使用EventEmit
对象来传,这中间又会用到Observable
,可以借机再熟悉一下。 - 2. 条件搜索,看看今天写的这个
GetDataService
到底能不能用。
遇到的问题
遇到最大的一个问题就是:在DetailComponent
中使用假数据,页面渲染正常,当使用请求回来的数据时页面就。。。也渲染正常,但是报错,说我的数据未定义,找了以下是也是没找到原因,后来找大师兄求助啊,其实原因是由于ajax
的异步机制导致的,在渲染页面的时候请求的数据并没有回来,所以会报错,但是我使用的Obvevable
对象,会持续订阅这个对象的数据,所以数据加载完它又会显示在页面上,由于页面渲染的时候在跳转到自路由的路径下,所以当出现错误的时候,js就会挂器,导致路由有跳回原来的路径,
那么解决的办法也很简单,简单查询有没有数据就可以,当没有数据的时候,就不进行下一步的页面渲染:<table *ngIf="articleList" class="table table-striped">
就是这句里面的*ngIF
收获
收获,突然发现有些东西变得不那么难了,有些东西又变得不那么简单了。假假真真真真假假。
评论