ngFor(Angular 7)未显示动态Carosel图像

时间:2019-03-27 07:40:59

标签: angular typescript bootstrap-4 carousel ngfor

我正在设置一个轮播,用于显示从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>

此代码应在促销数组中显示图像,但不显示任何内容。

0 个答案:

没有答案