title: Unable to bind JSON to angular 4 Object
body: <p>I am returning a JSON object but the <code>*ngFor</code> loop is not rendering anything.</p>
  
  <p>Component:</p>
  
  <pre><code>@Input() users: Observable&lt;IUser&gt;;
  
  this.users = this.getUserByRole(this.role);
  
   getUserByRole(role) {
  
          return this._searchService.getUsersByRole(role);
      }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code> &lt;tr saSmartMenu *ngFor='let data of users | async' (click)="onEditUser.emit(data)"&gt;
                                      &lt;td&gt;{{data.ssn }}&lt;/td&gt;
                                      &lt;td&gt;{{data.userName }}&lt;/td&gt;
                                      &lt;td&gt;{{data.lastName }}&lt;/td&gt;
                                      &lt;td&gt;{{data.ofcSymbId }}&lt;/td&gt;
                                      &lt;td&gt;{{data.role }}&lt;/td&gt;
                                  &lt;/tr&gt;
  </code></pre>
  
  <p>search.service:</p>
  
  <pre><code> getUsersByRole(role:string) {
              return this.http.get(this.url+role)
                  .map(res =&gt; res.json().data);
          }
  </code></pre>
  
  <p>I check the JSON with a restful client and my object is exactly like the JSON I am getting.</p>