ionic-framework - 无法使用 slideNext 和 slideTo 在 ionic5 应用程序中手动更改幻灯片
问题描述
我构建了一个 ionic5 应用程序,该应用程序利用循环添加离子幻灯片,其内容是不同的无线电组,其内容是从数组中提取的。我的问题是当我尝试使用 slideNext 或 slideTo 切换幻灯片时,它无法工作。我只能在刷新浏览器后才能让它工作,而在我构建一个 android 应用程序并测试时根本不工作。
我正在尝试的代码是:
<ion-slides #quizSlider>
<ion-slide *ngFor="let question of questions;let i = index">
<ion-list lines="none">
<ion-radio-group [(ngModel)]="singleanswer">
<ion-item *ngFor="let answer of question.answers">
<ion-label>{{answer}}</ion-label>
<ion-radio slot="start" value="{{answer}}">
</ion-radio>
</ion-item>
</ion-radio-group>
<div fxLayout="row" fxLayoutAlign="center" >
<ion-button color="primary" (click)="checkUserAnswers(i)">Check</ion-button>
</div>
</ion-list>
</ion-slide>
</ion-slides>
和 .ts 代码:
import { IonSlides } from '@ionic/angular';
@ViewChild('quizSlider') quizSlider: IonSlides;
export class Quiz {
questions: Question[];
constructor() {}
checkUserAnswers(questionNo)
{
if(this.questions.length == questionNo + 1)
{
this.router.navigate(['complete']);
}
else
{
console.log('test');
//this.quizSlider.slideNext();
//this.quizSlider.lockSwipes(false);
this.quizSlider.slideNext();
//this.quizSlider.lockSwipes(true);
//let currentIndex = this.quizSlider.getActiveIndex().then( (val) => console.log(val) );
//console.log('Current Slide: ' + currentIndex);
//this.quizSlider.slideTo(questionNo + 1);
}
}
}
不确定它是否相关,但我使用的离子环境是:
Ionic CLI : 6.11.8
Ionic Framework : @ionic/angular 5.0.5
@angular-devkit/build-angular : 0.900.7
@angular-devkit/schematics : 9.0.7
@angular/cli : 9.0.7
@ionic/angular-toolkit : 2.2.0
更新 我曾尝试使用滑动,我意识到(如使用按钮事件的情况)幻灯片更改仅在页面刷新后才有效。我已尝试降级到 ionic4,但问题仍然存在
解决方案
推荐阅读
- aurelia - 如何重定向到 Aurelia 中的上一页
- java - 如何在 API 的多个方法中集中处理异常
- sql - 从 Group By 创建的两个聚合列中获取平均列
- ios - 缩放后的问题我想要完整的图像不仅缩放图像的一部分
- angular - Angular 7 无法在 safari 12 上播放 vimeo 视频
- laravel - 如何在 .sh 文件中使用全局 laravel 命令?
- sql - 如何在数据之间的时间间隔都超过5分钟的情况下按计数对数据进行查询和排序
- python - 如何将链接图像嵌入到 python 电子邮件中
- javascript - 如果选中复选框,则相应的按钮应更改颜色
- c# - Asp Net web api 2 响应缓存(服务器端)