события-изменения не распознаются - PullRequest
Новая
       3

события-изменения не распознаются

1 голос
/ 09 марта 2020

У меня есть разные списки, и я хочу перейти к ним с сегментом. Так что это будет навигация по нажатию кнопки сегмента. Но я также хочу перемещаться по списку. Я делаю это с слайдами. Логично, что когда я нажимаю кнопку, слайд должен переключаться на слайд с соответствующей кнопкой сегмента, а активный индекс сегмента должен обновляться при скольжении. Но почему-то эти два механизма не взаимодействуют правильно. Потому что, когда я нажимаю кнопку, слайд не меняется, а когда я скользю, активный индекс сегмента не меняется. Когда я хочу консоль войти два веселья c. Я заметил, что они никогда не называются. Это почему? Вот мой код:

html: 

  <ion-toolbar>
        <ion-segment mode="md" [(ngModel)]="segment" (ionChange)="segmentChanged()">
            <ion-segment-button value="0">
            </ion-segment-button>
            <ion-segment-button value="1">
            </ion-segment-button>
            <ion-segment-button value="2">
          </ion-segment-button>
        </ion-segment>
    </ion-toolbar>

    <div>
        <ion-slides #slides (ionSlideDidChange)="slideChanged()" scrollbar="false">
            <ion-slide>   

                <ion-list>
                    <ion-card>
                    </ion-card>
                </ion-list>
            </ion-slide>

            <ion-slide>
                <ion-list>
                   <ion-card>
                   </ion-card>
                </ion-list>
            </ion-slide>

            <ion-slide>
                <ion-list>  
                    <ion-card>
                    </ion-card>
                </ion-list>
            </ion-slide>
        </ion-slides>  
    </div>

ts: 

  @ViewChild('slides', { static: true }) slider: IonSlides;
...
 async segmentChanged() {
    await this.slider.slideTo(this.segment);
    console.log(1)
  }

  async slideChanged() {
    this.segment = await this.slider.getActiveIndex();
    console.log(2)
  }

1 Ответ

0 голосов
/ 09 марта 2020

Это поможет вам. 

    <ion-segment [(ngModel)]="segments" color="primary">
        <ion-segment-button value="topSeller">Top Seller</ion-segment-button>
        <ion-segment-button value="deals">Deals </ion-segment-button>
        <ion-segment-button value="mostLiked"> Most Liked</ion-segment-button>
      </ion-segment>




    <div class="module" [ngSwitch]="segments">
    <ion-slides slidesPerView=2.2 spaceBetween=10 *ngSwitchCase="'topSeller'" (ionSlideDidChange)="slideChanged1()">
      <ion-slide *ngFor="let p of tab1">

      </ion-slide>
    </ion-slides>


// Do same for other two case as well

    <ion-slides slidesPerView=2.2 spaceBetween=10 *ngSwitchCase="'deals'" (ionSlideDidChange)="slideChanged2()">
      <ion-slide *ngFor="let p of tab1">

      </ion-slide>
    </ion-slides>


    <ion-slides slidesPerView=2.2 spaceBetween=10 *ngSwitchCase="'mostLiked'" (ionSlideDidChange)="slideChanged3()">
      <ion-slide *ngFor="let p of tab1">

      </ion-slide>
    </ion-slides>
</div>

В файле Ts 

slideChanged1() {
    console.log(this.segments);
  }
slideChanged2() {
    console.log(this.segments);
  }
slideChanged3() {
    console.log(this.segments);
  }
...