微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Angular Bootstrap Carousel 不显示图像

如何解决Angular Bootstrap Carousel 不显示图像

我正在尝试创建自定义图像轮播。我遇到了一个问题,当我上传我的图像时,它们没有出现在轮播中。轮播显示正常,但图像没有。我正在使用 ng-bootstrap。我上传显示图片的打字稿代码如下:

import { Component,OnInit } from '@angular/core';
import { EmbroideryService } from '../Services/embroidery.service';
import { NgbActiveModal,NgbModal,ModaldismissReasons } from '@ng-bootstrap/ng-bootstrap';
import { Embroidery } from "../models/embroidery";
import { Subscription } from "rxjs";
import { NgbCarouselConfig,NgbSlideEvent,NgbSlideEventSource } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-embroidery',templateUrl: './embroidery.component.html',styleUrls: ['./embroidery.component.css']
})
export class EmbroideryComponent implements OnInit {

   public images: Embroidery[] = [];
   private imageSubscription: Subscription;
   closeResult = '';

  constructor(private embroideryService: EmbroideryService,private modalService: NgbModal,config: NgbCarouselConfig) {
    config.interval = 6000;
    config.wrap = true;
    config.keyboard = true;
    config.pauSEOnHover = false;
  }

  ngOnInit(): void {
    
    this.embroideryService.getEmbroideries();
     this.imageSubscription = this.embroideryService
      .getimagesstream()
      .subscribe((images: Embroidery[]) => {
        this.images = images;
        images.sort();
        images.reverse();
        //console.log(images);
      });
  }

还有我的 HTML 文件

<ngb-carousel *ngIf="images?.length > 0">
  <ng-template ngbSlide *ngFor="let image of images; let i = index; let last = first;">
    <div class="picsum-img-wrapper">
      <img [src]="image.avatar" [alt]="name">
    </div>
  </ng-template>
</ngb-carousel>

这是组件的样子:

Empty ng-bootstrap Carousel

当我不使用轮播显示图像时,它们显示正常。有人可以指导我如何解决这个问题吗?谢谢!

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。