Angular быстро обновляет элемент, загруженный из локального хранилища

Question

В моем приложении angular я построил кэш самых последних действий пользователей (например, всех результатов поиска, по которым был выполнен щелчок) и сохранил его в локальном хранилище браузера, чтобы предоставить возможность go вернуться к посещенные страницы.

Затем я отображаю список карточек, каждая из которых представляет запись из массива из локального хранилища. Каждая из карточек кликабельна и возвращается на страницу посещенных сведений.

Проблема в том, что angular, кажется, продолжает обновлять записи, и в момент обновления sh элемент не активируется. Это означает, что мне всегда приходится нажимать на запись списка несколько раз, прежде чем событие действительно пройдет.

Если я просто храню записи в локальном массиве вместо локального хранилища браузера, все работает нормально.

Вот соответствующий код:

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>

cache-service.ts (общая служба)

getFromBrowserCache(): CacheItem[] {
    let cacheItems: CacheItem[]= JSON.parse(localStorage.getItem(this.getLocalStorageKey()));
    if (cacheItems == null) {
      cacheItems = [];
    }
    return cacheItems;
}

Answer 1

Это потому, что вы вызываете функцию из вашего html. Вы можете избежать этого, выполнив вызов getFromBrowserCache () в вашем машинописном коде, возможно, ngOnInit, а затем сохраните результаты в переменной для использования в вашем * 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>