DateTime Picker с историческим ползунком

Question

Я пытаюсь создать угловой компонент, который будет отображать данные в коллекции на основе значения ползунка материала.Обычно при перемещении ползунка запрашивается коллекция, которая возвращает данные между двумя датами, которые являются максимальным значением ползунка и текущим значением ползунка.Colloection заполняется при создании компонента.Окно слайдера может быть только 6 часов (часть спец.).Эта часть работает нормально, мне нужны новые функциональные возможности для изменения значений ползунка даты / времени.если дата / время «От» изменены, дата / время «До» будут автоматически установлены на 6 часов, и наоборот.Проблема в том, что я не могу заставить работать какое-либо средство выбора даты.Значение ползунка указывается в миллисекундах и часто обновляется по мере поступления новых обновлений данных в оперативную коллекцию, и нам нужно, чтобы она была актуальной.

Я пробовал использовать несколько сторонних средств выбора времени, но могуКажется, никто из них не работает.Я подумал об использовании средства выбора даты материала с помощью средства выбора третьей части, например, https://www.npmjs.com/package/ngx-material-timepicker или https://github.com/kuhnroyal/mat-datetimepicker, но я не могу установить и обновить средство выбора даты материала с текущим значением в миллисекундах.

vehicle-route-history-card.component.html:

<mat-card>
    <div fxLayout="row">
        <div fxFlex="20" fxLayout="column">
            <div fxFlex="100"><mat-icon class="col-shade">date_range</mat-icon><sup class="col-shade date-text">FROM</sup></div>
            <div fxFlex="100" class="vh-lb date-text">{{matslider.value | date :'medium'}} </div>
            <mat-form-field>
                <input matInput [matDatepicker]="picker" [ngModel]="currentValue | date:'dd/MM/yyyy'" placeholder="Choose a date">
                <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                <mat-datepicker #picker></mat-datepicker>
            </mat-form-field>
        </div>
        <div fxFlex="60" fxLayout="column">
            <mat-slider fxFlex="100" #matslider class="route-slider" [(value)]="currentValue" (input)="currentValue = $event.value; getVehicleHistory();" tickInterval="1000" min="{{pastTime}}" max="{{time}}"></mat-slider>
        </div>
        <div fxFlex="20" fxLayout="column">
            <div fxFlex="100"><mat-icon class="col-shade">date_range</mat-icon><sup class="col-shade date-text">TO</sup></div>
            <div fxFlex="100" class="vh-lb date-text">{{time | date :'medium'}} </div>
        </div>
    </div>

</mat-card>

vehicle-route-history-card.component.ts:

export class VehicleRouteCardComponent implements OnDestroy {

    ngOnDestroy(): void {
    }

    time: number;
    pastTime: number;
    currentValue: number;
    updateValueToMax: boolean = false;
    updateValueToMin: boolean = false;

    date = new FormControl(new Date());

    constructor(private actionsHandler: VehicleActionHandler, private routing: VehicleRoutingService ) {

        this.setUpTimes();
        this.currentValue = this.time;
        this.routing.resetRoutingArray();
        // initilize with 6 hours of data.
        this.actionsHandler.GetVehiceRouteData(this.pastTime, this.time);

        //update times to always be accurate
        setInterval(() => {
            this.setUpTimes();
            console.log(this.time);
        }, 1000);
    }

    setUpTimes() {
        if (this.currentValue == this.time)
            this.updateValueToMax = true;
        else if (this.currentValue == this.pastTime)
            this.updateValueToMin = true;

        this.time = new Date().getTime(); //Current time in milliseconds
        this.pastTime = new Date().setHours(new Date().getHours() - 6); //6 Hours ago in milliseconds.

        if (this.updateValueToMax) {
            this.currentValue = this.time;
            this.updateValueToMax = false;
        }
        else if (this.updateValueToMin) {
            this.currentValue = this.pastTime;
            this.updateValueToMin = false;
        }

    }

    getVehicleHistory() {
        console.log(this.currentValue);
        this.routing.pushRoutingData(this.currentValue, this.time);
    }
}

маршрутизация транспортного средства.service.ts

@Injectable()
export class VehicleRoutingService {

    subs: Subscription[];
    dv: IVehicle;
    locationsArray: IVehicleRouteData[];
    private locations_array: BehaviorSubject<IVehicleRouteData[]>;
    public readonly Locations_array: Observable<IVehicleRouteData[]>;

    constructor(private vehicle: VehicleStoreService, private actionsHandler: VehicleActionHandler) {
        this.subs = new Array<Subscription>();
        this.locationsArray = new Array<IVehicleRouteData>();
        this.locations_array = new BehaviorSubject(this.locationsArray);
        this.Locations_array = this.locations_array.asObservable()
        this.addSubscriptions();
    }

    pushRoutingData(from: number, to: number) {

        this.locations_array.next(this.locationsArray.filter(function (item) {
            return item.statusReportTime >= from && item.statusReportTime <= to;
        }));
    }

    resetRoutingArray() {
        this.locationsArray = new Array<IVehicleRouteData>();
        this.locations_array.next(this.locationsArray);
    }

    addSubscriptions() {

        //current vehicle selected
        this.subs.push(this.vehicle.FocusDV.subscribe(vehicle => {
            if (!isNullOrUndefined(this.dv)) {
                if (isNullOrUndefined(vehicle))
                    this.resetRoutingArray();
                else if (this.dv.vehicleID != vehicle.vehicleID)
                    this.resetRoutingArray();
            }

            this.dv = vehicle;

        }));

        //this pushes all vehicle movement updates
        this.subs.push(this.vehicle.GeoScopedDV.subscribe(vehicle => {

            if (isNullOrUndefined(this.dv))
                return;

            if (isNullOrUndefined(this.locationsArray))
                return;

            if (this.locationsArray.length <= 0)
                return;

            var vehicleUpdate = { ...vehicle };
            var currentVehicle = vehicleUpdate.features.find((f) => f.properties.id == this.dv.vehicleID);

            let newData = new VehicleRouteData();

            newData.latitude = currentVehicle.geometry.coordinates[1];
            newData.longitude = currentVehicle.geometry.coordinates[0];
            newData.statusReportTime = new Date().getTime();

            this.locationsArray.push(newData);
        }));

        this.subs.push(this.actionsHandler.Vehicle_route.subscribe(route => {
            if (route.length <= 0)
                return;

            this.locationsArray.length = 0;

            route.forEach(r => {
                let data = new VehicleRouteData();
                data.latitude = r.latitude;
                data.longitude = r.longitude;
                data.statusReportTime = r.statusReportTime;

                this.locationsArray.push(data);
            });
        }));

    }

}

Ожидаемый результат этого - иметь ползунок «Диапазон времени даты» в 6 часов, который можно установить на текущее время с актуальными обновлениями, а также использовать для просмотра прошлого (что потребует повторного вызова базы данных)