Angular快速刷新从本地存储加载的项目

在我的angular应用程序中，我构建了一个用户最新活动（例如，所有单击的搜索结果）的缓存，并将其存储在浏览器的本地存储中，以便能够返回到访问过的页面

然后，我显示一个卡列表，每个卡代表本地存储阵列中的一个条目。每个卡都可以单击并返回到已访问的详细信息页面

问题是，angular似乎一直在刷新条目，而在刷新时，该项不可单击。这意味着在事件实际进行之前，我必须多次单击列表条目

如果我只是将条目存储在本地数组中，而不是浏览器的本地存储中，则一切正常

以下是相关代码：

cache.component.html：

<div class="scrollbar-horinzontal">
    <ng-container *ngFor="let cacheEntry of cacheService.getFromBrowserCache()">
      <div>List item content goes here... </div>
    </ng-container>
</div>

---

这是因为您正在从html调用函数。您可以通过在typescript中执行getFromBrowserCache（）调用来避免这种情况，可能是ngonit，然后将结果保存到一个变量中，以便在*ngFor中使用

缓存组件ts

ngOnInit() {
    this.cacheService.getFromBrowserCache().subscribe(data => {
        this.cache = data;
    })
}

缓存组件html

<div class="scrollbar-horinzontal">
    <ng-container *ngFor="let cacheEntry of cache">
      <div>List item content goes here... </div>
    </ng-container>
</div>

列表项内容位于此处。。。

这是因为您正在从html调用函数。您可以通过在typescript中执行

getFromBrowserCache（）

调用

ngonit

，然后将结果保存到变量中以在

*ngFor

中使用来避免这种情况。是的，这就解决了它！非常感谢你！如果你回答这个问题，我会标记它！很高兴能帮上忙，我添加了一个答案。非常感谢。这对我有用。当缓存更新时，它附带了一些手动更新typescript中的局部变量，但现在它像一个符咒一样工作！

<div class="scrollbar-horinzontal">
    <ng-container *ngFor="let cacheEntry of cache">
      <div>List item content goes here... </div>
    </ng-container>
</div>