我还没有遇到过另一个幸运纺车的js插件。调用alert prize()时,我遇到了getIndicatedSegment属性的问题;在Ionic 3 / Angular 2应用程序中运行。我已经遵循了这个问题how to use winwheel.js callback in angular2并且已经使用它与应用程序一起工作并且非常好。
当调用提醒奖励功能时,我收到此错误:
TypeError: Cannot read property 'getIndicatedSegment' of undefined
at alertPrize (http://localhost:8100/?ionicplatform=ios:51:41)
at eval (eval at winwheelStopAnimation
我已按照该答案中的建议并在我的index.html文件中添加了奖品功能,以便访问我的page.ts文件中的奖品回调,并在基本示例上显示警报以提醒奖项。但是,当我尝试访问getIndicatedSegment变量时,我遇到了这个问题。
以下是我的LuckySpinPage.ts文件中的代码:
export class LuckySpinPage {
constructor(public navCtrl: NavController) { }
wheel;
wheelSpinning = false;
ngAfterViewInit() {
this.initWheel();
}
initWheel() {
this.wheel = new Winwheel({
'numSegments': 10, // Specify number of segments.
'outerRadius': 150, // Set radius to so wheel fits the background.
'innerRadius': 30, // Set inner radius to make wheel hollow.
'pointerAngle': 0,
'pointerGuide': false, // Turn pointer guide on.
'drawMode' : 'segmentImage',
'segments': [
{'image' : '../../assets/images/segment-winner.png'},
{'image' : '../../assets/images/segment-1.png'},
{'image' : '../../assets/images/segment-2.png'},
{'image' : '../../assets/images/segment-3.png'},
{'image' : '../../assets/images/segment-5.png'},
{'image' : '../../assets/images/segment-6.png'},
{'image' : '../../assets/images/segment-7.png'},
{'image' : '../../assets/images/segment-8.png'},
{'image' : '../../assets/images/segment-9.png'},
{'image' : '../../assets/images/segment-10.png'}
],
'animation': // Define spin to stop animation.
{
'type': 'spinToStop',
'duration': 5,
'spins': 10,
'callbackFinished': 'alertPrize()'
}
});
}
// -------------------------------------------------------
// Click handler for spin button.
// -------------------------------------------------------
startSpin() {
// Ensure that spinning can't be clicked again while already running.
if (this.wheelSpinning === false) {
this.wheel.startAnimation();
this.wheelSpinning = true;
}
}
}
index.html文件中的代码:
<script>
// This function called after the spin animation has stopped.
function alertPrize(){
// Call getIndicatedSegment() function to return pointer to the segment
pointed to on wheel.
var winningSegment = this.wheel.getIndicatedSegment();
// Basic alert of the segment text which is the prize name.
alert("You have won " + winningSegment.text + "!");
}
</script>
我的目标是获得特定细分受众群的奖励,例如,当您登陆第4段时,您已赢得警报,或在登陆任何其他细分受众群时获得奖励。