无法在 Angular 模板中呈现内容答案

【问题标题】：Unable to render content in Angular template无法在 Angular 模板中呈现内容
【发布时间】：2020-05-27 17:48:03
【问题描述】：

我正在我的应用程序中实现 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 的数据。

让我知道我在这里做错了什么？

【问题讨论】：

请在轮播后面/后面添加：
```
{{ ourSpecialties | json }}
```
。你在浏览器中看到了吗？
我在浏览器中看到数据

标签： javascript angular typescript carousel owl-carousel

【解决方案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>

【讨论】：

我已经编辑了代码，请看看它是否适合你。

【解决方案2】：

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

【讨论】：