Question

为了引入表的分页，我创建了分页组件。虽然currentPage类型是数字，但调用方法nextClicked（）导致字符串添加如：＆＃34; 01111＆＃34;而不是4。

export class PaginationComponent implements OnInit {
  @Input() totalItems: number;
  @Input() itemsPerPage: number;
  @Input() currentPage: number;

  @Output() setPrevious = new EventEmitter<number>();
  @Output() setNext = new EventEmitter<number>();
  constructor() { }

  ngOnInit() {
  }
  prevClicked() {
    if (this.currentPage > 0) {
      this.currentPage = this.currentPage - 1;
    }
    this.setPrevious.emit(this.currentPage);
  }
  nextClicked() {
    this.currentPage += 1;
    this.setNext.emit(this.currentPage);
  }
}


<button 
class="btn btn-primary"
(click)="prevClicked()">Prev</button>
<p>Page {{ currentPage }}</p>
<button 
class="btn btn-primary"
(click)="nextClicked()">Next</button>

在父级中使用分页组件：

<pagination
    [totalItems]="totalItems"
    itemsPerPage=10
    currentPage=0
    (setPrevious) = "setPage($event)"
    (setNext) = "setPage($event)">
</pagination>

Answer 1

尝试：

nextClicked() {
    this.currentPage++;
    this.setNext.emit(this.currentPage);
}

Answer 2

您的代码应该正常运行。如果它不起作用那么只有原因可能是在运行时，父组件正在分配＆＃39; currentPage＆＃39;此组件的输入为字符串值。

Answer 3

尝试使用this.currentPage = this.currentPage + 1;代替this.currentPage += 1;

Answer 4

你的问题是你应该将itemsPerPage和currentPage绑定为表达式（即将它们放在brakets []中），如：

<pagination
    ...
    [itemsPerPage]="10"
    [currentPage]="0"
    ...>
</pagination>

角度数被解释为字符串，表格分页

4 个答案: