Ionic 2定时遍历数组元素报错：msg属性未定义(TypeError)

这个问题我太熟啦！你遇到的Cannot set property 'msg' of undefined本质是定时器回调里的this指向跑偏了——默认情况下，setInterval/setTimeout的回调函数里的this会指向全局对象（浏览器环境里就是window），根本不是你的AuthPage类实例，自然找不到msg属性咯。

另外还有个小细节：你代码里的msg只声明了类型但没初始化，最好先赋值为空数组[]，不然就算this对了，一开始msg是undefined，调用push也会报错。

下面给你几种靠谱的解决方案：

1. 箭头函数（最推荐的Angular写法） #

箭头函数会自动继承外层作用域的this，也就是你的类实例，写法最简洁：

export class AuthPage {
    public verifyPhone : string;
    public collection = 'clients';
    public data;
    public user;
    public response;
    count : number;
    public msg : any[] = []; // 先初始化空数组
    private intervalId: any; // 保存定时器ID，方便后续清理

    // 假设这是你触发遍历的方法
    startArrayTraversal() {
        const targetArray = ['元素1', '元素2', '元素3']; // 替换成你的目标数组
        let currentIndex = 0;

        this.intervalId = setInterval(() => {
            if (currentIndex < targetArray.length) {
                const currentElement = targetArray[currentIndex];
                console.log(currentElement); // 控制台打印
                this.msg.push(currentElement); // 这里的this就是类实例啦
                currentIndex++;
            } else {
                clearInterval(this.intervalId); // 遍历完成后销毁定时器
            }
        }, 2000);
    }

    // 组件销毁时必须清理定时器，避免内存泄漏
    ngOnDestroy() {
        if (this.intervalId) {
            clearInterval(this.intervalId);
        }
    }
}

2. 提前保存this到变量 #

如果不想用箭头函数，可以在定时器外面把类实例的this存成一个变量（比如that），回调里用这个变量访问类属性：

startArrayTraversal() {
    const targetArray = ['元素1', '元素2', '元素3'];
    let currentIndex = 0;
    const that = this; // 保存类实例的this

    this.intervalId = setInterval(function() {
        if (currentIndex < targetArray.length) {
            that.msg.push(targetArray[currentIndex]);
            console.log(targetArray[currentIndex]);
            currentIndex++;
        } else {
            clearInterval(that.intervalId);
        }
    }, 2000);
}

3. 用bind绑定this #

给定时器的回调函数手动绑定类实例的this，强制指定this的指向：

startArrayTraversal() {
    const targetArray = ['元素1', '元素2', '元素3'];
    let currentIndex = 0;

    const traverseCallback = function() {
        if (currentIndex < targetArray.length) {
            this.msg.push(targetArray[currentIndex]);
            console.log(targetArray[currentIndex]);
            currentIndex++;
        } else {
            clearInterval(this.intervalId);
        }
    }.bind(this); // 绑定this到类实例

    this.intervalId = setInterval(traverseCallback, 2000);
}

额外注意事项 #

• 一定要初始化msg为[]，避免初始状态是undefined导致的报错
• 组件销毁时必须调用clearInterval清理定时器，否则组件销毁后定时器还在后台运行，会造成内存泄漏

内容的提问来源于stack exchange，提问作者G B