如何在角度 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','&#8250;'],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 (将#修改为@）

angular angular11 html