使用 angular4 和 jquery 进行分页答案

【问题标题】：pagination with angular4 and jquery使用 angular4 和 jquery 进行分页
【发布时间】：2018-04-10 21:49:07
【问题描述】：

我尝试在 Angular 4 和 jquery 中应用分页，但是当我点击下一个按钮时出现错误，它移动前 2 页，然后移动 3 个其他页面，然后移动 5 个其他页面（单击时）..

代码组件：

addClass(x) {
  $(".page-item").click(function () {
    $(this).addClass("current").siblings().removeClass('current');
  });
}

next() {
  $('.next').click(function () {
    $('.current').next('li').trigger('click');
  });
}

代码html：

<ul>
  <li class="previous">Previous</li>
  <li class="next" (click)="next()">Next</li>
</ul>

<ul class="pagination">
  <li *ngFor="let x of pages" class='page-item current' 
      (click)='addClass(x)'>{{x}}</li>
</ul>

例如，当我单击第 5 页时，会添加当前类，但错误类当前它为第一次单击移动 2 页，然后单击移动其他 3 个页面，然后单击移动 5 页

【问题讨论】：

你能澄清一下你的问题吗？有点不清楚问题是什么。还混合了 Angular（点击）处理程序和 jQuery 点击处理程序，听起来不错？
请至少注意格式化，代码难以阅读......
我的问题是，如果单击下一个并且 1 中的当前类移动到 3（而不是 2）.. 它移动到 2 但自动移动到 3，当点击到 3 时它移动到 6 并且它到 4 5 但自动移动到 5
Fibonacci sequence。我认为您应该在每次页面更新时重置 x 。似乎 x 的值被添加到 x 的先前值中。您的代码很难理解（以及为什么 jQuery 与 Angular？），但是当您在调用后 console.log(x) 时会发生什么？

标签： javascript jquery angular

【解决方案1】：

您已经在 HTML 模板中绑定了 click 事件：

<li class="next" (click)="next()">Next</li>

在您的组件中，您每次点击都会添加一个新的 click 处理程序：

next()
{
   $('.next').click(function(){
     $('.current').next('li').trigger('click');
   });
}

所以你真正想做的只是在方法中中继点击，而不是添加一个新的处理程序：

next()
{
   $('.current').next('li').trigger('click');
}

【讨论】：

不知道你是如何从当前对他问题的描述中理解这个人想要什么的。