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

Question

为了介绍表的分页，我创建了分页组件。 尽管currentPage类型是数字，但调用方法nextClicked（）会导致字符串添加，例如：“ 01111”而不是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

您的代码应该可以正常工作。 如果它不起作用，则唯一的原因可能是在运行时，父组件将“ currentPage”输入分配给该组件的是字符串值。

Answer 3

试试this.currentPage = this.currentPage + 1; 而不是this.currentPage += 1;

Answer 4

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

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