带历史滑块的DateTime选择器

Question

我正在尝试创建一个角度组件，该组件将基于Material Slider值显示集合中的数据。基本上，当移动滑块时，将查询一个集合，并在两个日期时间之间返回数据，即最大滑块值和滑块的当前值。在创建组件时填充了collection。滑块窗口只能是6个小时（属于规范的一部分）。该部分工作正常，我需要新的功能来更改日期/时间滑块的值。如果更改了“从”日期/时间，则“到”日期/时间将自动设置为6小时后，反之亦然。问题是我似乎无法让任何日期时间选择器正常工作。滑块值以毫秒为单位，并且随着新数据更新被实时推送到集合中而需要经常更新。

我曾尝试使用一些第三方聚会时间选择器，但似乎无法使用它们。我已经考虑过将物料日期选择器与第3个兼职选择器一起使用，例如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);
    }
}

vehicle-routing.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小时的“日期时间范围”滑块，可以将其设置为具有实时更新的当前日期时间，还可以用于查看过去（这将需要再次调用数据库）< / p>