Проблемы с использованием данных JSON API в моем HTML-шаблоне

Question

Я новичок в angular и у меня есть некоторые проблемы, с которыми я не сталкивался в остальной части моего проекта:

Проблема - я звоню в API для получения массива JSON.Этот вызов работает должным образом, и я могу записать данные на консоль и т. Д. Моя проблема возникает, когда я пытаюсь использовать данные в своем шаблоне HTML.

HTML:

<div *ngFor="let dets of homeDet" ngClass="homeDetails shown">

    <section ngClass="listInfo">
      <p ngClass="address">
        <span ngClass="segment">{{ dets.streetAddress }},</span>
        <span ngClass="segment"> {{ dets.city }}, {{ dets.state }}, {{ dets.zip }}</span>
      </p>
    </section>
  </div>

component.ts

export class MapsComponent implements OnInit, OnDestroy {
private detData: Array<any> = [];
public homeDet = [{}];

  private homeId(homesId) {
    sessionStorage.setItem('homesId', homesId);
    this.searchProp.homeDetails(homesId).then((data) => {
      let homeDet = data;
      console.log(data);
    });
  }

Service.ts

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<any> {
    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();
  }

Я указал только используемый прямой код;У меня есть стандартная угловая структура файла, мой импорт и т. Д.

Что я делаю не так?Это сводит меня с ума!Спасибо!

РЕДАКТИРОВАТЬ Вот вывод html.Закомментированная часть, как мне кажется, может помочь с решением:

<!--bindings={
  "ng-reflect-ng-for-of": "[object Object]"
}-->
<div ngclass="homeDetails shown" class="homeDetails shown" ng-reflect-ng-class="homeDetails shown">
  <section ngclass="listInfo" class="listInfo" ng-reflect-ng-class="listInfo">
    <p ngclass="address" class="address" ng-reflect-ng-class="address"><span ngclass="segment" class="segment" ng-reflect-ng-class="segment">,</span><span ngclass="segment" class="segment" ng-reflect-ng-class="segment"> , , </span></p>
  </section>
</div>

РЕДАКТИРОВАТЬ 2 Забыл включить JSON:

{
  "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"
  }
}

Answer 1

Это потому, что вам не нужно указывать this в html-шаблоне, так как он уже обработан angular.поэтому вместо this.homeDet просто укажите homeDet в html.Также вам нужно присвоить данные вашей переменной homeDet по методу ngOnInit вашего компонента.

<div *ngFor="let dets of homeDet" ngClass="homeDetails shown">
  <section ngClass="listInfo">
    <p ngClass="address">
      <span ngClass="segment">{{ dets.streetAddress }},</span>
      <span ngClass="segment"> {{ dets.city }}, {{ dets.state }}, {{ dets.zip }}</span>
    </p>
  </section>
</div>

Итак, чтобы проверить, что это работает.Давайте упростим component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  public homeDet;

  ngOnInit(): void {
    this.homeDet = [
      {
        streetAddress: 'sample',
        city: 'sample',
        state: 'sample',
        zip: 'sample'
      }
    ];
  }
}