title: Drop-down change -data showing [object object]
body: <p>am trying to bind JSON data to a drop-down list.OnChnge function I pass the value to the corresponding component, when I debug it showing <code>[object object]</code>.</p>
  
  <p>My JSON value</p>
  
  <pre><code>dataLists = [
      { 'id': 1, 'host_name': 'Service 1', 'port': '8090', 'username': 'user1', 'password': 'abc' },
      { 'id': 2, 'host_name': 'Service 1', 'port': '8090', 'username': 'user2', 'password': 'abc' },
      { 'id': 3, 'host_name': 'Service 1', 'port': '8090', 'username': 'user3', 'password': 'abc' }
  ];
  </code></pre>
  
  <p>html code</p>
  
  <pre><code>&lt;select #selectedData (change)="selected($event,selectedData.value)"&gt;
              &lt;option&gt;Select....&lt;/option&gt;
              &lt;option *ngFor="let dataList of dataLists"  [value]="dataList"&gt;{{dataList.host_name}}&lt;/option&gt;
          &lt;/select&gt;
  </code></pre>
  
  <p>component code</p>
  
  <pre><code>selected(ev: Event, data: any []) {
          // console.log('data', data);
          for (const ea of data) {
              console.log(ea);
  
          }
  </code></pre>
  
  <p>How can i get data as json format in component.
  like <code>{ 'id': 1, 'host_name': 'Service 1', 'port': '8090', 'username': 'user1', 'password': 'abc' }</code></p>