我正在设置一个轮播,用于显示从Node API获取的动态图像。我在Angular 7中使用ngFor指令
这是我尝试过的代码:
TypeScript:
getPromotions() {
this.dashboardService.getPromotions()
.subscribe(res => {
this.promotions = res.listings.map(res => {
return {image: `data:${
res.file_mime_type
};base64,${this.dashboardService.bufferToString(res.file_content.data)}`}
});
console.log('Promotions::', this.promotions);
}, err => {
})
}
html:
<div class="card">
<div class="card-body">
<ngb-carousel>
<ng-template ngbSlide *ngFor="let promotion of promotions">
<img [src]="promotion.image" height="392" class="d-block w-100" alt="Random slide">
<div class="carousel-caption">
<h3>No Promotion</h3>
<p>There is not active Promotion.</p>
</div>
</ng-template>
</ngb-carousel>
</div>
</div>
此代码应在促销数组中显示图像,但不显示任何内容。