Angular 我在点击了上一页或者下一页方法之后，重新加载渲染数据。为什么还需要再点击一次页面的其他地方才会渲染出来？（或者数据改变了页面没有渲染）
<p>在你的 TypeScript 代码中，当调用 <code>nextPage_TopSelling()</code> 或 <code>prevPage_TopSelling()</code> 方法时，虽然你更新了 <code>currentPage_TopSelling</code> 的值并调用了 <code>reloadTopSelling()</code> 方法，但是 Angular 并不会自动检测到这些变化并重新渲染页面。这是因为 Angular 的变化检测机制是基于异步的，在一些情况下需要手动触发变化检测。</p><p>为了解决这个问题，你可以注入 <code>ChangeDetectorRef</code> 服务并手动触发变化检测。首先，将 <code>ChangeDetectorRef</code> 导入到你的组件中：</p>
<div class="dark bg-gray-950 rounded-md">
<div class="flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md"><span class="hljs-keyword">typescript</span></div>
<div class="flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md">
<div class="cnblogs_code">
<pre>import { ChangeDetectorRef } from '@angular/core';</pre>
</div>
</div>
<div class="flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md"><code class="!whitespace-pre hljs language-typescript"><span class="hljs-keyword"><span style="font-family: "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif">然后在组件的构造函数中注入 </span><code>ChangeDetectorRef</code><span style="font-family: "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif">：</span></span></code></div>
</div>
<div class="dark bg-gray-950 rounded-md">
<div class="flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md">typescript</div>
<div class="flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">constructor(
private cdr: ChangeDetectorRef) { }</span></pre>
</div>
</div>
<div class="flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md">最后，在 <code>reloadTopSelling()</code> 方法中的订阅回调函数末尾调用 <code>detectChanges()</code> 方法来手动触发变化检测：</div>
</div>
<div class="dark bg-gray-950 rounded-md">
<div class="flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md">typescript</div>
<div class="flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">reloadTopSelling() {
// 其他代码...
this.partsService.getList(undefined, stateId, undefined, this.currentPage_TopSelling, this.itemsPerPage_TopSelling).subscribe((res: PartsDto_WebSitePagedResultDto) => {
// 其他代码...
// 调用变化检测
this.cdr.detectChanges();
});
}</span></pre>
</div>
</div>
</div>
<p>通过这种方式，当你调用 <code>nextPage_TopSelling()</code> 或 <code>prevPage_TopSelling()</code> 方法时，Angular 将会在数据更新后重新渲染页面，而不需要再次点击页面的其他地方。</p><br><br>
来源：https://www.cnblogs.com/Poetwithapistol/p/18067717
頁:
[1]