今天完成的事情

1. 1. 用post请求的一波数据，成功的展示在页面上；
2. 2. 随后写了个服务，get数据，显示，这个中间好多坑，坑的不要不要的。
   看一下请求的代码：

//get-data.service.ts
public 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为关键字，所以用delete1
  delete1: {
    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. 1. 处理url传参：从SearchComponet传到DetailComponent,使用EventEmit对象来传，这中间又会用到Observable，可以借机再熟悉一下。
2. 2. 条件搜索，看看今天写的这个GetDataService到底能不能用。

遇到的问题

遇到最大的一个问题就是：在DetailComponent中使用假数据，页面渲染正常，当使用请求回来的数据时页面就。。。也渲染正常，但是报错，说我的数据未定义，找了以下是也是没找到原因，后来找大师兄求助啊，其实原因是由于ajax的异步机制导致的，在渲染页面的时候请求的数据并没有回来，所以会报错，但是我使用的Obvevable对象，会持续订阅这个对象的数据，所以数据加载完它又会显示在页面上，由于页面渲染的时候在跳转到自路由的路径下，所以当出现错误的时候，js就会挂器，导致路由有跳回原来的路径，
那么解决的办法也很简单，简单查询有没有数据就可以，当没有数据的时候，就不进行下一步的页面渲染：
<table *ngIf="articleList" class="table table-striped">就是这句里面的*ngIF

收获

收获，突然发现有些东西变得不那么难了，有些东西又变得不那么简单了。假假真真真真假假。