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

如何在角度 11 中动态设置 owl carousel 的 startPosition?

如何解决如何在角度 11 中动态设置 owl carousel 的 startPosition?

我是角度的新手。我想动态设置 angular(11) owl carousel 的 startPosition。我在模型中使用 owl carousel 并从 api 获取数据。我设置了如下的自定义选项:

 customOptions: OwlModule = {
    loop: false,mouseDrag: true,touchDrag: true,pullDrag: false,dots: false,navSpeed: 700,navText: ['&#8249','›'],startPosition: this.sPosition,margin:30,responsive: {
      0: {
        items: 1 
      },400: {
        items: 1
      },740: {
        items: 1
      },940: {
        items: 1
      }
    },nav: true
  }

我已经使用全局变量设置了 startPosition,但没有更改 customOptions 中的 startPosition。我正在通过循环索引获取数据位置。

像点击图片然后用猫头鹰轮播打开模型并调用新的 api 来获取特定图片的场景。

代码

show(id:number,i:number)
  {
    this.sPosition = i;
    console.log("start :; " +  JSON.stringify(this.customOptions));
    this.galleryService. getgalleryView(id).subscribe(
      response =>{
        this.modelgallery = response;
        this.getgalleryData1();
        this.images = response;
      },error =>{
        console.log("model error :: " + error)
      });
  }

owl-carousel 代码

<owl-carousel [options]="customOptions" [items]="images" [carouselClasses]="['owl-theme','sliding']" [id]="images.id">
  <div class="item" *ngFor="let img of images">
    <img style="height: 260px;width:100%;object-fit: cover;"
       src='{{"assets/images/" + img.image}}' [alt]="img.name" [title]="img.name" />
      <div class="card-body">
           <h5 class="card-title">{{img.name}}</h5>
           <p class="card-text">{{img.description}}</p>
      </div>
   </div>
</owl-carousel>

我也尝试设置如下数据:

    this.sPosition = i;
    this.mdata = JSON.stringify(this.customOptions);  
    console.log("With Stringify :",this.mdata);  
      // Parse from JSON  
    this.parsedJson = JSON.parse(this.mdata);  
    this.parsedJson.startPosition = this.sPosition;
    console.log("With Parsed JSON :",this.parsedJson.startPosition);  
    console.log("start : " +  JSON.stringify(this.customOptions));

正在更新 this.parsedJson.startPosition 中的数据,但未更新 carousel 的 startPosition。

我不明白为什么数据没有在 startPosition 中更新。

请建议我如何动态设置它?

抱歉英语不好。

提前致谢。

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