Whenever I press a button, I receive information from a server about a specific vehicle by subscribing to an observable. If I press the same button again, I want to unsubscribe from the current "vehicleDetail" data that I'm viewing (to prevent memory leaks) so that I can inspect the new data of another vehicle.
I have a VehicleDetail class with the following properties:
export class VehicleDetail {
id: number;
name: string;
alarm: Alarms[] | null;
signalinfo: SignalInfo[];
position: Position | null;
}
This is the code in my .service.ts file:
getVehicleDetail(id: number): Observable<VehicleDetail> {
const url = `${this.vehiclesUrl}/${id}/${'detail'}`;
return this.http.get<VehicleDetail>(url).pipe(
tap(_ => this.log(`fetched vehicle detail id=${id}`)),
catchError(this.handleError<VehicleDetail>(`getVehicledetail id=${id}`))
);
}
And here's what I have in my .component.ts file:
import { Component, OnInit } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import * as Leaflet from 'leaflet';
import { VehicleService } from '../vehicle.services';
import { VehicleDetail } from '../models/vehicle-detail';
.........
vehicleDetail: VehicleDetail;
private unsubscribe$ = new Subject();
.........
getVehicleDetail(): Observable<VehicleDetail> {
const details = this.vehicleService
.getVehicleDetail(this.vehicleService.vehicleId);
details.takeUntil(this.unsubscribe$).subscribe(data => {
this.vehicleDetail = data;
});
return details;
}
updateInfo(item): void {
this.unsubscribe$.next();
this.unsubscribe$.complete();
this.vehicleService.vehicleId = item;
console.log(this.vehicleService.vehicleId);
this.getVehicleDetail().takeUntil(this.unsubscribe$).subscribe(() => {
if (this.vehicleDetail.position) {
this.setMap();
return;
}
this.map.flyTo(new Leaflet.LatLng(50.7089, 10.9746), 4, {
animate: true,
duration: 4
});
});
}
The error message related to 'takeUntil' states:
Error TS2339: Property 'takeUntil' does not exist on type 'Observable'.
What could be the issue here?