как установить динамически startPosition карусели совы в угловой 11?

Question

Я новичок в angular. Я хочу динамически установить startPosition угловой (11) карусели совы. Я использую карусель совы в модели, и данные получаются из 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 с глобальной переменной, но не изменил startPosition в customOptions. Я получаю позицию данных через индекс цикла.

сценарий, например, когда щелкаете изображение, затем открываете модель с каруселью совы и вызываете новый 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 [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 но не обновить в startPosition карусели.

Я не понимаю, почему данные не обновлялись в startPosition.

Подскажите, пожалуйста, как я могу установить его динамически?

Извините за плохой английский.

Заранее спасибо.