*ngFor nie wyswietla danych.

Stworzyłem sobie typescriptową klasę:

class Cryptocurrency {
  id: number;
  symbol: string;
  name: string;
  websiteSlug: string;
  links: Array<string>;

  constructor(id: number, symbol: string, name: string, websiteSlug: string, links: Array<string>) {
    this.id = id;
    this.symbol = symbol;
    this.name = name;
    this.websiteSlug = websiteSlug;
    this.links = links;
  }
}

Pobieram sobie dane z zewnętrznego API (które wystawiam z drugiej aplikacji) i zapisuję sobie dane do Array<cryptocurrency>. Próbując wyświelić dane z tablicy, nie wyświetla się nic mimo, że dane fizycznie istnieją w tablicy (sprawdziłem debuggerem, prostym console.logiem, widzę też że tablica się uzupełnia - dlugosc tablicy wynosi 110). Plik html:

<ul>
      <li *ngFor="let cryptocurrency of cryptocurrencies; let i = index">
        {{i}} {{cryptocurrency.website_slug}}
        <br>
      </li>
    </ul>

Klasa w ktorej pobieram i zapisuje dane do tablicy:

constructor(cryptocurrencyService: CurrenciesService) {
    this.cryptocurrencyService = cryptocurrencyService;
    this.cryptocurrencyService.getCurrencies().subscribe(resp => {
      this.cryptocurrencies = resp.body;
    });
  }

Serwis:

 getCurrencies(): Observable<HttpResponse<Array<Cryptocurrency>>> {
    return this.http.get<Array<Cryptocurrency>>(this.url, {observe: 'response'});
  }

Wyprintuj na poziomie HTML, tzn.

cryptocurrencies: {{cryptocurrencies}}
<ul>
      <li *ngFor="let cryptocurrency of cryptocurrencies; let i = index">
        {{i}} {{cryptocurrency.website_slug}}
        <br>
      </li>
    </ul>

Sprawdź jak masz ustawione changeDetection w komponencie, którego template zwiera *ngFor.

changeDetection mam ustawione na default. Nie do końca nic nie wyświetla, bo wyświetla indeks w tablicy.
O dziwo, teraz sprawdziłem tak jak czlonek zarządu napisał i wyświetliło mi listę obiektów. Ale, gdy staram się odwołać bezpośrednio do jakiegoś pola obiektu w tablicy (cryptocurrencies[0].name) dostaję błąd, że zmienna undefined - ale iterując po tablicy ngForem takiego błędu nie dostaję. Wydaje mi się, że jakimś cudem tworzone są obiekty, ale wartości zmiennych są przypisywane do innych pól obiektów:

0:
   cryptocurrency:
      id: 1684
      name: "Qtum"
      symbol: "QTUM"
      websiteSlug: "qtum"

Tak wygląda przykładowy obiekt o indeksie 0 w tablicy, gdy wypisuję całą tablicę na konsoli.

Może strona jest renderowana kiedy dane nie przyszły jeszcze z serwera?
Można to zabezpieczyć na różne sposoby:

• jakimś route-guardem (nie pamiętam który bo nie robiłem tak nigdy)
• możesz dodać *ngIf="cryptocurrencies"
• w konstruktorze zrobić this.cryptocurrencies = [], a dane ładować w ngOnInit (ja tak robię)

Głupi jestem. Problem leżał w tym, że z serwera wystawiałem CryptocurrencyDTO w którym był Cryptocurrency, co powodowało, że to nie powinna być Array<Cryptocurrency> tylko Array<CryptocurrencyDTO>. (na serwerze postanowiłem sobie kiedyś, że dodam Hateoas, dlatego zrobiłem dla tego DTO). Problem rozwiazany.