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

从服务器接收的数据结构可能不同。您收到的是阵列还是可迭代对象？