Question

作为Nativescript和Typescript的初学者我经常只是尝试使用我在示例中找到的代码。现在我有一个组件可以生成一个Gridlayout并对手势做出反应（例如Swipe或Pan）。简化代码如下所示：

import { Component, OnInit, ViewChild, ElementRef } from "@angular/core";
import { SwipeGestureEventData, GesturesObserver, GestureTypes, PanGestureEventData } from "ui/gestures";

export class CardComponent implements OnInit {
    constructor( ) { }
    prevDeltaX: number = 0;

    ngOnInit() {
        //initialising of the layout is unimportant 

        //Calls the funtion that creates the Layout and handles gestures
        for (var key in this.SourceArray) {
            this.handleSwipe(key);
        }
    }

 handleSwipe(key: any) {
    // grid is this GridLayout Object created, cut out here

    grid.on(GestureTypes.pan, function (args: PanGestureEventData) {
        console.log(this.prevDeltaX);  //Error here
    });
}

每当我在屏幕上滑动，而不是显示0时，该函数会产生错误： TypeError: Cannot read property 'prevDeltaX' of undefined

使用handleSwipe声明let prevDeltaX: number函数内的对象会起作用，不幸的是我必须在其外部声明对象，以便能够更改指定的值并重复使用它。

问题：如何从Typescript中的函数中访问（和更改）对象？

Answer 1

使用arrow functions捕获正确的this：

grid.on(GestureTypes.pan, (args: PanGestureEventData) => {
    console.log(this.prevDeltaX); 
});

箭头函数工作的原因是因为this在箭头函数内不会改变（即这将是CardComponent实例），其中this将根据调用上下文改变你使用function() {}。

Nativescript Angular：不能从函数内部读取对象（这个.undefined？）

1 个答案: