无法在 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

*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>

Answer 2

您从服务器接收到的数据结构可能不同。您收到的是数组还是 Iterable？

无法在 Angular 模板中呈现内容

Unable to render content in Angular template

javascript

angular

typescript

carousel

owl-carousel