Angular typescript handling post request data - html

Question

I've created a basic function in my component TS file to make a post request to retrieve data from a server. This function works fine but when I try to place the array of data into a variable so I can then write it on page via HTML, I can't seem to get the desired effect. It seems as if I'm doing something wrong which is causing the data not to be written into the "json" variable.
Here is my component TS, the variable I'm trying to pass the data through to is 'json';
postData = {
command: 'get_feature',
classes: 'F,G',
}
url = "http://c****************"
json;
constructor(private http: HttpClient) {
this.http.post(this.url, this.postData).toPromise().then((data:any) => {
console.log("post request in progress")
console.log("printing data array")
console.log(data)
this.json = data.json
console.log("printing json variable")
console.log(this.json)
console.log("post request finished")
});
}
And here is the basic HTML, it should only write the type of data, because I haven't stringified the data yet but it's writing absolutely nothing as if there is nothing in the variable.
<pre>
JSON test
{{ json }}
</pre>

Answer 1

the correct usage would be
// post is generic, so you can pass type here, if no type - pass any
this.http.post<ResponseType>(this.url, this.postData).toPromise().then((data) => {
this.json = data
});
and you can't just render the huge json in the mteplate, but you can try json pipe, to see what is inside of that json
<pre>
JSON test
{{ json | json }}
</pre>