Can't access children of Json Object from successful api call result

I’m creating a detail page where an injected simple http provider fetches a remote json file and assigns the data to a property postDetailData of PageClass. I’m able to console-log the data at PageClass level and its type successfully.

Remote Json File Contents:

      "postImage" : "build/assets/feed-img-1.jpg",
      "postTitle" : "Top tips for programming",
      "postCategory" : "Events",
      "postContent" : "Lorem ipsum dolor sit amet.",
      "postCommentCount" : 353,
      "postNumberOfShares" :94,
      "postNumberOfLikes" : 42

Class Function

public loadFeed() {
    let loader = this.createLoader();

    .then(data => {
      if (data.ErrorStatus) {
        this.postDetailData = data;
        console.log(this.postDetailData); //using typeof confirms as object

However, using dot notation of this property in my template gives an undefined error message:


Even though postDetailData is accessible in template (using json pipe), I cannot access the children.

I’ve searched online for hours on end and still can’t figure out why. Any help would be awesome.

Solved. Turns out I needed to explicitly define the class property’s object structure to match the json rather than relying implictly on the remote JSON’s structure itself:

So in PageClass:

singlePostData : Object = {
    postImage: <string> null,
    postTitle: <string> null,
    postCategory : <string> null,
    postCommentCount : <number> null,
    postNumberOfShares: <number> null,
    postNumberOfLikes: <number> null

That way the properties are accessible for use in template when assigned the remote json data.