Невозможно отобразить содержимое в шаблоне Angular

Question

Я использую ngx-carousel в своем приложении.

Когда я жестко кодирую данные, все работает нормально. Но с данными сервера он не работает.

Ниже мой код.

this.contentfulService.getContent('ourSpecialties')
  .then(ourSpecialties => {
    this.ourSpecialties = ourSpecialties;
    console.log(this.ourSpecialties);
  });

HTML

  <owl-carousel-o *ngIf="ourSpecialties" [options]="customOptions">
    <ng-template *ngFor="let ourSpecialtie of ourSpecialties" carouselSlide>
      <img src="{{ourSpecialtie.fields.image.fields.file.url}}">
      <h3>{{ourSpecialtie.fields.title}}</h3>
      <p>{{ourSpecialtie.fields.description}}</p>
    </ng-template>

  </owl-carousel-o> 

Я вижу данные в консоли для ourSpecialties.

Сообщите мне, что я здесь делаю не так?

Answer 1

Структура данных, которые вы получаете от сервера, может отличаться. Вы получаете массив или Iterable?

Answer 2

Микросинтаксис директивы

*ngFor раскрывается во внешний тег <ng-template>. Вероятно, внутренний шаблон не отображается. Попробуйте заключить *ngFor в тег <ng-container>. Попробуйте следующее

<owl-carousel-o *ngIf="ourSpecialties" [options]="customOptions">
  <ng-container *ngFor="let ourSpecialtie of ourSpecialties">
    <ng-template carouselSlide>
      <img src="{{ourSpecialtie.fields.image.fields.file.url}}">
      <h3>{{ourSpecialtie.fields.title}}</h3>
      <p>{{ourSpecialtie.fields.description}}</p>
    <ng-template>
  </ng-container>
</owl-carousel-o>