更改事件无法识别答案

【问题标题】：change-events are not recognized更改事件无法识别
【发布时间】：2020-03-08 21:29:06
【问题描述】：

我有不同的列表，我想用一个段导航到它们。所以这将是关于点击段按钮的导航。但我也想浏览滑动列表。我用幻灯片来做这件事。所以从逻辑上讲，当我单击按钮时，幻灯片应该切换到带有相应段按钮的幻灯片，并且在滑动时段的活动索引应该更新。但不知何故，这两种机制没有正确交互。因为当我单击按钮时，幻灯片不会改变，而当我滑动片段的活动索引时不会改变。当我想控制台记录这两个函数时。我注意到他们从未被调用过。这是为什么？这是我的代码：

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)
  }

【问题讨论】：

标签： javascript angular typescript ionic-framework ionic4

【解决方案1】：

这会对你有所帮助。

    <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);
  }

【讨论】：