Disclaimer: I am relatively new to Angular2 and typescript, so please bear with me for any errors.
The Challenge: My current task involves subtracting a start date/time from an end date/time, using the result in a formula for my calculation displayed as "calc". The issue arises when attempting to use a mathematical operation within this formula which leads to various errors during transpilation:
1 mock-orders.ts(4,14): error TS2322: Type '{ order_no: string; scheduled: string; lateral: string; start_time: string; checks: string; stop_...' is not assignable to type 'Order[]'.
Type '{ order_no: string; scheduled: string; lateral: string; start_time: string; checks: string; stop_...' is not assignable to type 'Order'.
Types of property 'checks' are incompatible.
Type 'string' is not assignable to type 'number'.
Here is where the problem occurs in the child component. Please note line 28 where this.calc is defined:
// order.ts
import { Component, OnInit } from '@angular/core';
export class Order {
order_no: string;
scheduled: string;
lateral: string;
start_time: string;
checks: number;
stop_time: string;
status: string;
approx_cfs: string;
approx_hrs: string;
approx_af: string;
calc: number;
constructor(data: {} = {}) {
this.order_no = data["order_no"] || "";
this.scheduled = data["scheduled"] || "";
this.lateral = data["lateral"] || "";
this.start_time = data["start_time"] || "";
this.checks = data["checks"] || "";
this.stop_time = data["stop_time"] || "";
this.status = data["status"] || "";
this.approx_cfs = data["approx_cfs"] || "";
this.approx_hrs = data["approx_hrs"] || "";
this.approx_af = data["approx_af"] || "";
this.calc = (!this.stop_time ? ((new Date().getTime() - new Date(this.start_time).getTime()) / 1000.0 / 60.0 / 60.0) * this.checks * 0.0825 : ((new Date(this.stop_time).getTime() - new Date(this.start_time).getTime()) /1000.0 / 60.0 / 60.0) * this.checks * 0.0825);
console.log(this.calc);
};
};
I suspect that one of the issues lies in performing math operations on dates and then assigning the outcome to a number type.
Next, we have the call to this component for usage in the service:
// order.service.ts
import { Injectable } from '@angular/core';
import { Order } from './order';
import { ORDERS } from './mock-orders';
@Injectable()
export class OrderService {
getOrders(): Promise<Order[]> {
return Promise.resolve(ORDERS);
}
}
The following file represents the data arrays pulled each time the service runs to illustrate what will be received from the database:
// mock-orders.ts
import { Order } from './order'
export const ORDERS: Order[] = [
{order_no: '12345',
scheduled: '08/16/16 13:45',
lateral: 'L1-8-1-T7, L1-8-1-T6',
start_time: '08/16/16 15:45',
checks: '23.25',
stop_time: '08/17/16 15:30',
status: 'Delivered',
approx_cfs: '25.00',
approx_hrs: '22',
approx_af: '45.38',
},
{order_no: '12346',
scheduled: '08/17/16 11:45',
lateral: 'L1-8-1-T7, L1-8-1-T6',
start_time: '08/17/16 15:30',
checks: '20.25',
stop_time: '',
status: 'Running',
approx_cfs: '25.00',
approx_hrs: '10',
approx_af: '20.63',
},
...
];