Question

这是我的代码

config.js:- 

  /**
 * PLUNKER VERSION (based on systemjs.config.js in angular.io)
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 * Override at the last minute with global.filterSystemConfig (as plunkers do)
 */
(function(global) {

  var ngVer = '@2.0.0-rc.1'; // lock in the angular package version; do not let it float to current!

  //map tells the System loader where to look for things
  var  map = {
    'app':                        'src', // 'dist',
    'rxjs':                       'https://npmcdn.com/rxjs@5.0.0-beta.6',
    'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api' // get latest
  };

  //packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.ts',  defaultExtension: 'ts' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' },
  };

  var packageNames = [
      '@angular/common',
      '@angular/compiler',
      '@angular/core',
      '@angular/http',
      '@angular/platform-browser',
      '@angular/platform-browser-dynamic',
      '@angular/router-deprecated',
      '@angular/testing',
      '@angular/upgrade',
  ];

  // add map entries for angular packages in the form '@angular/common': 'https://npmcdn.com/@angular/common@0.0.0-3'
  packageNames.forEach(function(pkgName) {
    map[pkgName] = 'https://npmcdn.com/' + pkgName + ngVer;
  });

  // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
  packageNames.forEach(function(pkgName) {
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
  });

  var config = {
    transpiler: 'typescript',
    typescriptOptions: {
      emitDecoratorMetadata: true
    },
    map: map,
    packages: packages
  }

  // filterSystemConfig - index.html's chance to modify config before we register it.
  if (global.filterSystemConfig) { global.filterSystemConfig(config); }

  System.config(config);

})(this);


/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

src/app.ts:-
  
  import {Component} from '@angular/core'
import {PaginationControlsCmp, PaginatePipe, PaginationService} from 'ng2-pagination';
@Component({
selector: 'my-app',
providers: [PaginationService],
template: `
<div class="row">
<div class="medium-8 medium-offset-2 columns">
<h2 class="subheader"></h2>
<table><tr>
<th>EmployeeId</th>
<th>EmployeeName</th>
<th>EmployeeSalary</th>
</tr>
<tr *ngFor="let item of collection | paginate: { itemsPerPage: 5, currentPage: p }">
<td>{{ item.EmployeeId }} 
</td>
<td> {{item.EmployeeName}}</td>
<td>{{item.EmployeeSalary}}<td></td>
</tr>
</table>
<pagination-controls (pageChange)="p = $event" #api>

</pagination-controls>
<select [ngModel]="selectedDevice" (ngModelChange)="onChange($event)">
<option *ngFor="#i of devices">{{i}}</option>
</select>
</div>
</div>

`,
directives: [PaginationControlsCmp],
pipes: [PaginatePipe]
})
export class App {
  devices=[5,10,15];
  onChange(newValue){
    this.selectedDevice=newValue;
 this.paginate.itemsPerPage= newValue;
  }
collection = [{"EmployeeId":"101","EmployeeName":"Ravi","EmployeeSalary":"100"},{"EmployeeId":"102","EmployeeName":"Raju","EmployeeSalary":"100"},
{"EmployeeId":"103","EmployeeName":"saw","EmployeeSalary":"100"},{"EmployeeId":"104","EmployeeName":"rao","EmployeeSalary":"100"},
{"EmployeeId":"105","EmployeeName":"Ravi","EmployeeSalary":"100"},{"EmployeeId":"106","EmployeeName":"Raju","EmployeeSalary":"100"},
{"EmployeeId":"107","EmployeeName":"saw","EmployeeSalary":"100"},{"EmployeeId":"108","EmployeeName":"rao","EmployeeSalary":"100"}
{"EmployeeId":"109","EmployeeName":"Ravi","EmployeeSalary":"100"},{"EmployeeId":"110","EmployeeName":"Raju","EmployeeSalary":"100"},
{"EmployeeId":"111","EmployeeName":"saw","EmployeeSalary":"100"},{"EmployeeId":"112","EmployeeName":"rao","EmployeeSalary":"100"},
{"EmployeeId":"113","EmployeeName":"saw","EmployeeSalary":"100"},{"EmployeeId":"114","EmployeeName":"rao","EmployeeSalary":"100"},
{"EmployeeId":"115","EmployeeName":"saw","EmployeeSalary":"100"},{"EmployeeId":"116","EmployeeName":"rao","EmployeeSalary":"100"},
{"EmployeeId":"117","EmployeeName":"saw","EmployeeSalary":"100"},{"EmployeeId":"118","EmployeeName":"rao","EmployeeSalary":"100"},
{"EmployeeId":"119","EmployeeName":"saw","EmployeeSalary":"100"},{"EmployeeId":"120","EmployeeName":"rao","EmployeeSalary":"100"},
{"EmployeeId":"121","EmployeeName":"saw","EmployeeSalary":"100"},{"EmployeeId":"122","EmployeeName":"rao","EmployeeSalary":"100"},
];
constructor() {
for (let i = 1; i <= 100; i++) {
this.collection.push(`item ${i}`);
}
}
}

src/main.ts:-
  
  //main entry point
import {bootstrap} from '@angular/platform-browser-dynamic';
import {App} from './app';
bootstrap(App, [])
  .catch(err => console.error(err));

<!DOCTYPE html>
<html>

  <head>
    <title>ng2-pagination playground</title>
     <script src="https://npmcdn.com/zone.js@0.6.12"></script>
    <script src="https://npmcdn.com/reflect-metadata@0.1.3"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.27/system.js"></script>
    <script src="https://npmcdn.com/typescript@1.8.10/lib/typescript.js"></script>
    <script src="https://rawgit.com/michaelbromley/ng2-pagination/master/dist/ng2-pagination-bundle.js"></script>
    <script src="config.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.0/foundation.css">
  </head>

  <body>
    <my-app>
    loading...
  </my-app>
  </body>

</html>

这是我的傻瓜： - https://plnkr.co/edit/2OW31JMz7Qk35ACip2Ch?p=preview 在上面的代码中，我有一个表格，其中显示了示例json数据。我编写了分页代码，工作正常，接下来我在下拉列表中显示当前页面上显示的更改号码记录。当我使用angularjs2.0中的typescript从下拉列表中选择选项时，如何更改表上的itemsperpage

Answer 1

更新了您的plunk

更改如下，

class hr_job(osv.osv):
_inherit = "hr.job"
_name = "hr.job"
_inherits = {'mail.alias': 'alias_id'}

def _get_attached_docs(self, cr, uid, ids, field_name, arg, context=None):
    res = {}
    attachment_obj = self.pool.get('ir.attachment')
    for job_id in ids:
        applicant_ids = self.pool.get('hr.applicant').search(cr, uid, [('job_id', '=', job_id)], context=context)
        res[job_id] = attachment_obj.search(
            cr, uid, [
                '|',
                '&', ('res_model', '=', 'hr.job'), ('res_id', '=', job_id),
                '&', ('res_model', '=', 'hr.applicant'), ('res_id', 'in', applicant_ids)
            ], context=context)
    return res

def _count_all(self, cr, uid, ids, field_name, arg, context=None):
    Applicant = self.pool['hr.applicant']
    return {
        job_id: {
            'application_count': Applicant.search_count(cr, uid, [('job_id', '=', job_id)], context=context),
            'documents_count': len(self._get_attached_docs(cr, uid, [job_id], field_name, arg, context=context)[job_id])
        }
        for job_id in ids
    }

_columns = {
    'survey_id': fields.many2one('survey.survey', 'Interview Form', help="Choose an interview form for this job position and you will be able to print/answer this interview from all applicants who apply for this job"),
    'alias_id': fields.many2one('mail.alias', 'Alias', ondelete="restrict", required=True,
                                help="Email alias for this job position. New emails will automatically "
                                     "create new applicants for this job position."),
    'address_id': fields.many2one('res.partner', 'Job Location', help="Address where employees are working"),
    'application_ids': fields.one2many('hr.applicant', 'job_id', 'Applications'),
    'partner_id': fields.many2one('res.partner', 'Cliente'),
    'application_count': fields.function(_count_all, type='integer', string='Applications', multi=True),
    'manager_id': fields.related('department_id', 'manager_id', type='many2one', string='Department Manager', relation='hr.employee', readonly=True, store=True),
    'document_ids': fields.function(_get_attached_docs, type='one2many', relation='ir.attachment', string='Applications'),
    'documents_count': fields.function(_count_all, type='integer', string='Documents', multi=True),
    'user_id': fields.many2one('res.users', 'Recruitment Responsible', track_visibility='onchange'),
    'color': fields.integer('Color Index'),
    'responsable_id': fields.many2one('res.users', 'Responsable'),
    'estado': fields.selection([(u'No Iniciado', u'No Iniciado'),
                                (u'En Proceso', u'En Proceso'),
                                (u'Contratado(a)', u'Contratado(a)'),
                                (u'Suspendido', u'Suspendido'),
                                (u'Finalizado', u'Finalizado'),
                                ('Otro', 'Otro')], 'Estado del Proceso'),
    'otro': fields.char('Otro Estado'),
    'fecha_inicio': fields.date('Fecha Inicio'),
    'fecha_fin': fields.date('Fecha Fin'),
    'partner_id': fields.many2one('res.partner', 'Cliente'),
    'applicant_ids': fields.one2many('hr.applicant', 'job_id', 'Candidatos', domain="[('partner_id','=',partner_id)]"),

在您的// <tr *ngFor="let item of collection | paginate: { itemsPerPage: 5, currentPage: p }"> <tr *ngFor="let item of collection | paginate: { itemsPerPage: perpageitem, currentPage: p }">班级

中

App

希望这会有所帮助!!

如何使用angularjs2更改打字稿中的itemsperpage？

1 个答案: