title: How top create model for arrays of objects
body: <p>Im trying to set the api return to one variable, works, but throw errors in console, why is this happening? and how to solve it?</p>
  
  <p>my ts:</p>
  
  <pre class="lang-js prettyprint-override"><code>public myData = new myDataModel();
  
  
  getData(){
      this.myCoolService.getDataAPI()
        .subscribe((res) =&gt; {
       this.myData = res['dataBean'][0];
  });
  }
  </code></pre>
  
  <p>my api retunrs this:</p>
  
  <pre><code>{ 
     "code":0,
     "financialInformationBean":[ 
        { 
           "name":{ 
              "value":"abc"
           },
           "color":{ 
              "value":"green"
           }
        }
     ]
  }
  </code></pre>
  
  <p>and my model is:</p>
  
  <pre class="lang-js prettyprint-override"><code>export class myDataModel {
    name: Value;
    color: Value;
  }
  
  export interface Value {
    value: string;
  }
  </code></pre>
  
  <p>and my html:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;span&gt;{{ myData.name.value }}&lt;/span&gt;
  </code></pre>
  
  <p>my console output this: <code>WalletComponent.html:30 ERROR TypeError: Cannot read property 'value' of undefined</code></p>
  
  <p>i already tried this in my html, my console dont showed any erros but i got this in <code>[Object] [Object]</code> in my page:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;span&gt;{{ myData.name}}&lt;/span&gt;
  </code></pre>