首页 > 其他分享 >Angular 我在点击了上一页或者下一页方法之后,重新加载渲染数据。为什么还需要再点击一次页面的其他地方才会渲染出来?

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

时间:2024-03-12 10:23:17浏览次数:20  
标签:变化检测 ChangeDetectorRef 渲染 TopSelling 点击 一页 Angular 页面

在你的 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 将会在数据更新后重新渲染页面,而不需要再次点击页面的其他地方。

标签:变化检测,ChangeDetectorRef,渲染,TopSelling,点击,一页,Angular,页面
From: https://www.cnblogs.com/Poetwithapistol/p/18067717

相关文章

  • 解决一次前端渲染时,把字符串原有空格去掉的问题
    问题回顾:前端在渲染时,会自动把字符串的空格忽略掉: 百度了下,全都是用js把原字符的空格去掉,但这并不是我想要的 解决方式:在偿试查阅资料后,发现新大陆,原来只要在对面的元素加上css样式即可:style="white-space:pre;" ......
  • Blender与在线渲染农场的结合
    ​在数字艺术和三维设计的世界里,Blender软件因其强大的功能和灵活性而广受欢迎。然而,随着项目复杂性的增加,渲染时间也随之增长,成为艺术家和设计师面临的一大挑战。在线渲染农场的出现,为这一问题提供了革命性的解决方案。本文深入探讨了Blender与在线渲染农场结合的优势,如何加速创......
  • vue3 监听鼠标点击拖动事件,移动端滑动事件,页面指针坐标事件
    PointerEventsAPI是Hmtl5的事件规范之一,它主要目的是用来将鼠标(Mouse)、触摸(touch)和触控笔(pen)三种事件整合为统一的API。Pointer指可以在屏幕上反馈一个指定坐标的输入设备。PointerEvent事件和TouchEventAPI对应的触摸事件类似,它继承扩展了TouchEvent,因此拥有TouchEven......
  • 鼠标点击特效
    引号内可更改自己喜欢的内容/*鼠标特效*/vara_idx=0;jQuery(document).ready(function($){$("body").click(function(e){vara=newArray("❤野原新之助❤","❤野原广志❤","❤野原美伢❤","❤野原小白❤","❤野原向日葵❤","❤风间❤&......
  • 高德地图api标记点和线段重合点击响应问题
    问题现象:现在地图上放置了line和marker,marker在line的上层显示这时line和marker同时存在,当line和marker有重合部分并点击重合点时,只响应line对应的click事件,而位于下方的line无法响应对应的click事件如图:原因:点击事件被上层的marker阻挡,marker并未注册点击事件解决方案在am......
  • 在HTML界面显示图片略缩图 , 点击图片放大显示
    HTML样式 <divid="outerdiv"style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;"> <divid="innerdiv"style="position:absolute;"> <imgid=&......
  • 很好用的把Table表格数据通过点击button导出成Excel
    HTML的button按钮点击查看代码<buttonid="btn_download"type="button"class="btnbtn-light"style="margin-left:10px;"onclick="btn_export()"><imgsrc="~/download.svg"alt=&quo......
  • wp/wordpress文章页面添加阅读量/点击量,后台并显示阅读量
    wordpress默认不带阅读量的,现在加上。在function.php加入代码1、前端加入阅读量和点击量//增加文章阅读次数functionrecord_visitors(){if(is_singular()){global$post;$post_ID=$post->ID;if($post_ID){$post_views=(in......
  • Unity3D 渲染队列 ZTest与ZWrite详解
    在Unity3D中,渲染队列(RenderingQueue)是一个非常重要的概念,它决定了游戏中各个物体的渲染顺序和优先级。而在渲染队列中,ZTest和ZWrite又是两个关键的参数,它们决定了物体在渲染的过程中如何处理深度测试和深度写入。本文将详细介绍Unity3D中的渲染队列、ZTest和ZWrite的概念,并给出相......
  • 从0开始做一个软渲染器 —— 法线变换
    从0开始做一个软渲染器——法线变换1.为什么要进行法线变换如果只对模型的位置进行变换,例如旋转和缩放(位移不会改变法线),而不考虑法线进行相应变换,那么模型的光照就一整个乱掉。2.怎么进行法线变换如果模型只是旋转或者XYZ等比例的缩放,那么法线直接乘以ModelMatrix不会有什......