Angular HttpInterceptor Cache не запускает обнаружение изменений

Обновлен код для уточнения. Компонент TVC содержит компонент lightweight-charts для торгового представления.

Есть боковая навигация со списком предметов. И каждый раз, когда выбирается новый / другой элемент, он запускает this.data.getDataForSymbol () в компоненте основного содержимого. Диаграмма полностью перерисовывается, когда НЕ используется кеширование ... но когда кеш используется (и подтверждено, что он работает) ... граф не перерисовывается.

Вот компонент, который отображает диаграмму:

@Component({
  selector: 'tvc',
  template: '<div #chart></div>',
})
export class TvcComponent implements AfterViewInit {

  @ViewChild('chart') chartElem: ElementRef;

  @Input()
  data: (BarData | WhitespaceData)[] | null;

  chart: IChartApi = null;

  ngAfterViewInit() {
    this.buildChart();
  }

  buildChart() {
    this.chart = createChart(<HTMLElement>this.chartElem.nativeElement, {
      width: 600,
      height: 300,
      crosshair: {
        mode: CrosshairMode.Normal,
      },
    });

    this.chart.timeScale().fitContent();
    const candleSeries = this.chart.addCandlestickSeries();
    candleSeries.setData(this.data);
  }
}

А вот компонент, в котором размещается TvcComponent, предоставляющий данные для диаграммы:

@Component({
  selector: 'main-content',
  template: `
      <div *ngIf="monthly$ | async as monthly">
        <tvc
          [data]="monthly"
        ></tvc>
      </div>`
})
export class MainContentComponent implements OnInit {

  monthly$: Observable<any[]>;

  constructor(
    private route: ActivatedRoute,
    private itemStore: ItemStore,
    private data: DataService
  ) {}

  ngOnInit(): void {
    this.route.params.subscribe((params) => {
      let id = params['id'];
      this.itemStore.items$.subscribe((items) => {
        this.monthly$ = this.data.getDataForSymbol(id, 'monthly');
      });
    });
  }
}

Вот соответствующий код для службы перехватчика:

@Injectable({ providedIn: 'root' })
export class CacheInterceptor implements HttpInterceptor {
  constructor(private cache: HttpCacheService) {}

  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    const cachedResponse = this.cache.get(req.urlWithParams);

    if (cachedResponse) {
      console.log(`${req.urlWithParams}: cached response`);
      return of(cachedResponse);
    }
    return next.handle(req).pipe(
      tap((event) => {
        if (event instanceof HttpResponse) {
          this.cache.put(req.urlWithParams, event);
          console.log(`${req.urlWithParams}: response from server`);
        }
      })
    );
  }
}

и сервис кеширования:

@Injectable()
export class HttpCacheService {
  private cache = {};

  get(url: string): HttpResponse<any> {
    return this.cache[url];
  }
  put(url: string, resp: HttpResponse<any>): void {
    this.cache[url] = resp;
  }
}

Я реализовал HttpInterceptor для caching (пример из Angular Github), и я кэширую HttpResponse для данных, которые затем подписываются с помощью асинхронного канала в шаблоне - и передаются как свойство input дочернему компоненту. Наблюдаемый содержит данные, отображающие диаграмму.

Данные (в основном) статичны, и выбор различных элементов запускает новый запрос Http. Таким образом, если кто-то будет переключаться между несколькими графиками, он будет делать несколько (повторных) вызовов без необходимости. Следовательно, кеширование.

Проблема в том, что, хотя кеш прекрасно работает, как определено с помощью логирования консоли) ... график не обновляется / не перерисовывается при доступе к данным из кеша. При первом выборе элемента A он получает данные с сервера и обрабатывается правильно. Если вы переместите элемент B (не в кеше), он сделает запрос к серверу, поместит ответ в кеш и отобразит правильный график. Проблема в том, что если вы переключитесь НАЗАД на элемент A, он получит правильные данные из кеша, но НЕ обновит график.

Я использую обнаружение изменений по умолчанию.