Question

我正在尝试创建一个分页表，我向api发送请求，但它只返回10行，我从头中获得总行数。从这一点开始，我想将我的表分成10行，因此我们假设：

5行=表格上的1个按钮（或禁用）

14行=表格上的2个按钮

40行=表格上的4个按钮

56行= 6个按钮等等

因此，在每个编号的按钮上，我想向我的API发送一个参数，指示与按钮数量相同的页面数量，但是，如您所见，我至少看不到一个第二个按钮

这是我的观点：

<table class="table table-condensed table-bordered table-striped">
  <tr>
     <th><span class="name">ResourceId</span></th>
     <th><span class="name">Parent Resource Set</span></th>
     <th><span class="name">Name</span></th>
     <th><span class="name">Description</span></th>
     <th><span class="name">Route</span></th>
     <th><span class="name">Environment</span></th>
  </tr>
  <tbody #tbody>
     <tr *ngFor="let resource of resources| paginate: {itemsPerPage:10, currentPage:page, id: '1'}; let i = index">
       <td>{{ resource.resourceId }}</td>
       <td>{{ resource.resourceSetId }}</td>
       <td>{{ resource.name }}</td>
       <td>{{ resource.description }}</td>
       <td>{{ resource.route }}</td>
       <td>{{ resource.environment }}</td>
     </tr>
    </tbody>
   <footer>total row count {{head}}</footer>
  </table>
 <pagination-controls (pageChange)="page = $event" id="1" maxSize="10" directionLinks="true" autoHide="false"></pagination-controls>

我的组件：

export class ResourcesComponent implements OnInit {
  resources : Resources[];
   data;
   head;
 constructor(private router: Router, private resourcesv: ResourcesService) { }
   getResources() {
      this.resourcesv.getResources().subscribe(resources => this.resources =resources);
   }
   ngOnInit() {
        this.getResources();
        this.resourcesv.fetchdata().subscribe((data)=>{ this.data = data.json,
        this.head = data.headers.get('x-rowcount');
      return this.head;
   });
  }
 }

和我的服务：

 @Injectable()
 export class ResourcesService {
  private resourcesurl = "http://localhost:9111/v1/resources";
  constructor(private http: Http) { }
  getResources() {
    let headers = new Headers();
    headers.append("api_key", "123456");
    return this.http.get(this.resourcesurl, { headers: headers }).map(this.extractData).catch(this.handleError);
   }
   fetchdata() {
   let headers = new Headers();
   headers.append("api_key", "123456");
   return this.http.get(this.resourcesurl, { headers: headers })
  .map((res) => res)
  }
  private extractData(res: Response) {
   let body = res.json();
    return body.data || {};
  }
  private handleError(error: Response | any) {
    let errMsg: string;
    if (error instanceof Response) {
     const body = error.json() || '';
     const err = body.error || JSON.stringify(body);
     errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
  }  else {
    errMsg = error.message ? error.message : error.toString();
   }
   console.error(errMsg);
   return Observable.throw(errMsg);
  }
 }

我想根据自定义标题

中返回的记录数设置一定数量的按钮

任何想法？

角度2表格分页

0 个答案: