Angular 我在点击了上一页或者下一页方法之后,重新加载渲染数据。为什么还需要再点击一次页面的其他地方才会渲染出来?
  1NZAVtGRG4uU 2024年03月12日 53 0

在你的 TypeScript 代码中,当调用 nextPage_TopSelling()prevPage_TopSelling() 方法时,虽然你更新了 currentPage_TopSelling 的值并调用了 reloadTopSelling() 方法,但是 Angular 并不会自动检测到这些变化并重新渲染页面。这是因为 Angular 的变化检测机制是基于异步的,在一些情况下需要手动触发变化检测。

为了解决这个问题,你可以注入 ChangeDetectorRef 服务并手动触发变化检测。首先,将 ChangeDetectorRef 导入到你的组件中:

typescript
import { ChangeDetectorRef } from '@angular/core';
然后在组件的构造函数中注入 ChangeDetectorRef
typescript
constructor(
private cdr: ChangeDetectorRef) { }
最后,在 reloadTopSelling() 方法中的订阅回调函数末尾调用 detectChanges() 方法来手动触发变化检测:
typescript
reloadTopSelling() {
  // 其他代码...

  this.partsService.getList(undefined, stateId, undefined, this.currentPage_TopSelling, this.itemsPerPage_TopSelling).subscribe((res: PartsDto_WebSitePagedResultDto) => {
    // 其他代码...

    // 调用变化检测
    this.cdr.detectChanges();
  });
}

通过这种方式,当你调用 nextPage_TopSelling()prevPage_TopSelling() 方法时,Angular 将会在数据更新后重新渲染页面,而不需要再次点击页面的其他地方。

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2024年03月12日 0

暂无评论

推荐阅读
  mYwXEFqSO0K7   2024年01月09日   15   0   0 Angular
1NZAVtGRG4uU