Winwheel.js getIndicatedSegment未定义

时间:2018-01-29 10:54:58

标签: angularjs ionic-framework

我还没有遇到过另一个幸运纺车的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段时,您已赢得警报,或在登陆任何其他细分受众群时获得奖励。

0 个答案:

没有答案