问题汇总：

问题汇总：

• 每个页面的盒子的padding：

.service-flow-list{
  padding: 32px;
}

==》

:host {
  padding: 32px;
  display: block;
}

• nz-card

<nz-card style="width:300px;">
      <ng-template #title>
        Card title
      </ng-template>
      <ng-template #extra>
        <a>More</a>
      </ng-template>
      <ng-template #body>
        <p>Card content</p>
        <p>Card content</p>
        <p>Card content</p>
      </ng-template>
    </nz-card>

hover的时候有shadow，8.x版本没有这个效果了！
有title、extra和body选项；extra类似：更多按钮等。

• 左侧：查询结果（+底边框）；右侧：申请按钮；效果实现

<div class="section-header">
  <div class="section-header-body">
    <h5 class="section-header__title">实例列表</h5>
    <div class="section-header__decorate-line"></div>
  </div>
  <div class="section-header-extra">
    <button nz-button>申请</button>
  </div>
</div>



.section-container{
  .section-header{
    display: flex;
    flex-direction:row;
    &__title{
      font-size: 14px;
      color:#4F6472;
      height: 34px;
      line-height: 34px;
      font-weight: 600;
    }
    // 也不需要定位，直接就是
    &__decorate-line{
      width: 40px;
      height: 3px;
      background: #3CC1C2;
    }
    &-body{
      flex:1;
    }
  }
}

• antd的问题

1. 0.5版本：当前支持 Angular^4.0.0 版本
   没有国际化问题，所有组件都是中文的
2. 0.6版本：0.6.x (support Angular 5.x & Ant Design 2.x) 不再维护
   增加了国际化的支持；angular5.x版本
3. 0.7版本：0.7.x (support Angular 5.x & Ant Design 3.x)
   0.7.0 作为 1.0 正式版 之前的最后一系列版本，涉及到了底层的大量重构与改动，大部分 API 将与 1.0 正式版本的内容保持一致
4. 1.8版本：1.0 版本基于最新的 Angular ^6.0.0 与 RxJS ^6.0.0 构建。目前支持 Angular ^6.0.0 版本。
   1.5.0支持通过配置 router.data 自动生成面包屑
5. 7.x版本：目前支持 Angular ^7.0.0 版本。
   全部组件默认工作在 OnPush 模式下，大幅度提升了组件性能
6. 8.x版本：目前支持 Angular ^8.0.0 版本。

• table+分页功能

<nz-table #nzTable [nzDataSource]="dataSource"
            [nzIsPagination]='false' >
           
</nz-table>

<nz-pagination [(nzPageIndex)]="ksPageNum"
                         [nzTotal]="ksTotal"
                         nzShowSizeChanger
                         nzShowQuickJumper
                         nzShowTotal
                         (nzPageSizeChange)="sizeChange($event)"
                         (nzPageIndexChange)="numChange($event);"
                         [nzPageIndex]='ksPageNum'
                         [nzPageSize]='ksPageSize'>

</nz-pagination>


  dataSource: any[];
  // size改变
  sizeChange(e){
    console.log(e);
    this.ksPageSize=e;
    this.search();
  }
  // 页数改变
  numChange(e){
    console.log(e);
    this.ksPageNum=e;
    this.search();
  }

==>分页组件的参数数在 table里面，按照里面的写。
其他功能：
loading状态；是否从第一页开始；源码 有bug有改动，新版本是否有问题（eg：跳转到1000页的时候）？删除数据后，是否返回上一页；

• form表单的问题

 <form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="_submitForm()">
      <div nz-form-item>
        <div nz-form-control [nzValidateStatus]="validateForm.controls.userName">
          <nz-input formControlName="userName" [nzPlaceHolder]="'Username'" [nzSize]="'large'">
            <ng-template #prefix>
              <i class="anticon anticon-user"></i>
            </ng-template>
          </nz-input>
          <div nz-form-explain *ngIf="validateForm.controls.userName.dirty&&validateForm.controls.userName.hasError('required')">Please input your username!</div>
        </div>
      </div>
      <div nz-form-item>
        <div nz-form-control [nzValidateStatus]="validateForm.controls.password">
          <nz-input formControlName="password" [nzType]="'password'" [nzPlaceHolder]="'Password'" [nzSize]="'large'">
            <ng-template #prefix>
              <i class="anticon anticon-lock"></i>
            </ng-template>
          </nz-input>
          <div nz-form-explain *ngIf="validateForm.controls.password.dirty&&validateForm.controls.password.hasError('required')">Please input your Password!</div>
        </div>
      </div>
      <div nz-form-item>
        <div nz-form-control>
          <label nz-checkbox formControlName="remember">
            <span>Remember me</span>
          </label>
          <a class="login-form-forgot" class="login-form-forgot">Forgot password</a>
          <button nz-button class="login-form-button" [nzType]="'primary'" [nzSize]="'large'">Log in</button>
          Or
          <a href="">register now!</a>
        </div>
      </div>
    </form>

==>做了校验，使用这个校验

 // 每次打开申请实例对话框，重置表单
resetForm() {
    this.validateForm.reset();
}

• 路由参数

在这里插入代码片