title: Angular consoled data showing null
body: <p>I am very confused with a problem that I am experiencing. I am trying to send a model to a post request. However when I console.log the model out in my browser, I see the following.</p>
  
  <p><a href="https://i.stack.imgur.com/z0Qgg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/z0Qgg.png" alt="enter image description here"></a></p>
  
  <p>If I then expand the consoled result by clicking on the arrow I see this</p>
  
  <p><a href="https://i.stack.imgur.com/bCvUk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bCvUk.png" alt="r"></a></p>
  
  <p>My request is failing because it is seeing the null value but there is actually data. Please assist.</p>
  
  <p>My request looks like this</p>
  
  <pre><code>const token = localStorage.getItem('token');
  const headers = new HttpHeaders()
    .set('Authorization', `Bearer ${token}`)
    .set('Content-Type', 'application/json');
  const options = { headers: headers };
  console.log(this.model);
  this.http.post('https://localhost:44345/api/Corporates/Create', this.model, options)
  .subscribe(data =&gt; {
    console.log(data);
  })
  </code></pre>
  
  <p>Model</p>
  
  <pre><code>  protected initModel() {
      this.model = {
        basics: null,
        retirements: null,
        risk: null,
        users: null
      };
    }
  </code></pre>
  
  <p>Populate model</p>
  
  <pre><code>  saveTemp( args: { tabName: string, tabModel: any } ) {
      switch (args.tabName) {
        case 'basics': {
          this.model.basics = args.tabModel;
          // console.log(this.model.basics);
          break;
        }
        case 'retirement': {
          this.model.retirements = args.tabModel;
          break;
        }
        case 'risk': {
          this.model.risk = args.tabModel;
          break;
        }
        case 'users': {
          this.model.users = args.tabModel;
          break;
        }
        default: {
          break;
        }
      }
    }
  </code></pre>