title: Issues with using JSON API data in my html template
body: <p>I am new to angular and having some issues that I haven't run into in the rest of my project:</p>
  
  <p>Issue - I am making a call to an api to get a JSON array. This call is working as intended, and I am able to log the data to console, etc. My issue comes into play when I try to utilize the data in my HTML template.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div *ngFor="let dets of homeDet" ngClass="homeDetails shown"&gt;
  
      &lt;section ngClass="listInfo"&gt;
        &lt;p ngClass="address"&gt;
          &lt;span ngClass="segment"&gt;{{ dets.streetAddress }},&lt;/span&gt;
          &lt;span ngClass="segment"&gt; {{ dets.city }}, {{ dets.state }}, {{ dets.zip }}&lt;/span&gt;
        &lt;/p&gt;
      &lt;/section&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>component.ts</p>
  
  <pre><code>export class MapsComponent implements OnInit, OnDestroy {
  private detData: Array&lt;any&gt; = [];
  public homeDet = [{}];
  
    private homeId(homesId) {
      sessionStorage.setItem('homesId', homesId);
      this.searchProp.homeDetails(homesId).then((data) =&gt; {
        let homeDet = data;
        console.log(data);
      });
    }
  </code></pre>
  
  <p>Service.ts</p>
  
  <pre><code>export class SearchPropService {
    public searchControl: FormControl;
    private activeRequest: Subscription = null;
  
    constructor(
      private http: HttpClient,
      private apiWrapper: GoogleMapsAPIWrapper,
      private mapsAPILoader: MapsAPILoader,
      private ngZone: NgZone, ) {
    }
  public homeDetails(homesId: {
    }): Promise&lt;any&gt; {
      const homeDetId = sessionStorage.getItem('homesId');
      const detailsUrl = 'http://someUrl' + homeDetId;
      const tokenSub = JSON.parse(sessionStorage.getItem('key'));
      const httpsearchoptions = {
        headers: new HttpHeaders({
          'Authorization': 'Bearer ' + tokenSub
        })
      };
      const detRequest = this.http.get(detailsUrl, httpsearchoptions);
      this.detailsRequest = detRequest.subscribe();
      return detRequest.toPromise();
    }
  </code></pre>
  
  <p>I only provided the direct code that is being utilized; I have the standard Angular file structure, have my imports in place, etc.</p>
  
  <p>What am I doing wrong? Its driving me nuts! Thanks!</p>
  
  <p><strong>EDIT</strong>
  Here is the output html. The commented out portion is what I think could help with the solution:</p>
  
  <pre><code>&lt;!--bindings={
    "ng-reflect-ng-for-of": "[object Object]"
  }--&gt;
  &lt;div ngclass="homeDetails shown" class="homeDetails shown" ng-reflect-ng-class="homeDetails shown"&gt;
    &lt;section ngclass="listInfo" class="listInfo" ng-reflect-ng-class="listInfo"&gt;
      &lt;p ngclass="address" class="address" ng-reflect-ng-class="address"&gt;&lt;span ngclass="segment" class="segment" ng-reflect-ng-class="segment"&gt;,&lt;/span&gt;&lt;span ngclass="segment" class="segment" ng-reflect-ng-class="segment"&gt; , , &lt;/span&gt;&lt;/p&gt;
    &lt;/section&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>EDIT 2</strong>
  Forgot to include the JSON:</p>
  
  <pre><code>{
    "id": "55884488:11223344",
    "streetAddress": "123 ABC Street",
    "city": "Chernobyl",
    "state": "NO",
    "zip": "99999",
    "price": "720000.000000",
    "bedrooms": 5,
    "bathrooms": 4,
    "sqft": 0,
    "yearBuild": 2003,
    "about": "Random String of text",
    "features": null,
    "images": ["https://someUrl.com"],
    "point": {
      "lati": 28.22266,
      "longi": -101.945536
    },
    "isForSale": true,
    "nearest": "",
    "gimages": null,
    "agent": {
      "firstName": "Charles",
      "lastName": "Incharge",
      "brokerageName": "Brokerage Name"
    }
  }
  </code></pre>