Can't get Variable

Issue

I'm trying to send a POST request to my HTTP Server on my ESP8266. 4 Variables should be transmitted: onhour, offhour, onminute, offminute. I want catch up the variables from my timepicker-component which I imported from "ng-bootstrap"

I have already tried several methods to do this but even after 3 days of messing around it wont work. I'm really new to Angular and this are my first steps with it. Also I have already bought a course on udemy but as already mentioned these are my first steps...

In the html file I can show up the variables but I'm not able to use it in typescript, they even update.

Following lifecycle should be realized:
INPUT the on and offtime -> CLICK save -> CALL method -> SEND data via post to backend -> PROCESSING in backend -> ACTING

export class TimepickerComponent implements OnInit {
ontime = {hour: '', minute: ''};
offtime = {hour: '', minute: ''};

onhour  = this.ontime.hour;
onminute = this.ontime.minute;
offhour = this.offtime.hour;
offminute = this.offtime.minute;
postData = {};
url = '192.168.4.1/settimes';

constructor(private http: HttpClient) {
this.postData = {
onhour: this.onhour,
onminute: this.onminute,
offhour: this.offhour,
offminute: this.offminute
};
}

I uploaded the full code for better view on CodePile:
HTML - https://www.codepile.net/pile/72MLn1pl
TS - https://www.codepile.net/pile/XRWPD67w

Solution

Your postData object is created in your constuctor and does not hold references to your variables in the view. You should construct your postData object in your postTimes function.

See this example:

var obj1 = { name : '' };

var val = obj1.name;

var data = { name : val };

val = 'bar';

console.log(data) // { name : ''}

var postData = { name : val };

console.log(postData); // { name: 'bar'}

Answered By - ndoes