尝试分配给 readonly 属性即使相同的命令在其他地方有效？

Question

我有一个 Javascript 函数（在 Angular 2 基于 NativeScript 的移动应用程序中），它在按下按钮时触发，它应该隐藏按钮并显示 activity 指示器取而代之的是，执行蓝牙扫描，完成后关闭 activity 指示灯并显示原始按钮。

bluetoothAdd() {
    this.isScanning = true;
    var plusIcon = this.page.getViewById("add");
    plusIcon.style.opacity = 0;
    bluetooth.hasCoarseLocationPermission().then(
        function (granted) {
            if (!granted) {
                bluetooth.requestCoarseLocationPermission();
            } else {
                bluetooth.startScanning({
                    serviceUUIDs: ["133d"],
                    seconds: 4,
                    onDiscovered: function (peripheral) {
                        console.log("Periperhal found with UUID: " + peripheral.UUID);
                    }
                }).then(function () {
                    console.log("scanning complete");
                    this.isScanning = false;
                    plusIcon.style.opacity = 1;
                }, function (err) {
                    console.log("error while scanning: " + err);
                });
                this.isScanning = false;
            }
        });
}

不幸的是，this.isScanning = false; 行抛出了所有这些错误。我做错了什么？

CONSOLE ERROR file:///app/tns_modules/angular2/src/platform/server/parse5_adapter.js:55:75: EXCEPTION: Error: Uncaught (in promise): TypeError: Attempted to assign to readonly property.
CONSOLE ERROR file:///app/tns_modules/angular2/src/platform/server/parse5_adapter.js:53:75: STACKTRACE:
CONSOLE ERROR file:///app/tns_modules/angular2/src/platform/server/parse5_adapter.js:53:75: resolvePromise@file:///app/tns_modules/zone.js/dist/zone-node.js:496:41
file:///app/tns_modules/zone.js/dist/zone-node.js:532:32
invokeTask@file:///app/tns_modules/zone.js/dist/zone-node.js:314:43
onInvokeTask@file:///app/tns_modules/angular2/src/core/zone/ng_zone_impl.js:35:51
invokeTask@file:///app/tns_modules/zone.js/dist/zone-node.js:313:55
runTask@file:///app/tns_modules/zone.js/dist/zone-node.js:214:58
drainMicroTaskQueue@file:///app/tns_modules/zone.js/dist/zone-node.js:432:43
promiseReactionJob@[native code]
UIApplicationMain@[native code]
start@file:///app/tns_modules/application/application.js:233:26
file:///app/tns_modules/nativescript-angular/application.js:65:26
ZoneAwarePromise@file:///app/tns_modules/zone.js/dist/zone-node.js:542:38
nativeScriptBootstrap@file:///app/tns_modules/nativescript-angular/application.js:64:23
anonymous@file:///app/main.js:5:36
evaluate@[native code]
moduleEvaluation@[native code]
[native code]
promiseReactionJob@[native code]
CONSOLE ERROR file:///app/tns_modules/zone.js/dist/zone-node.js:419:27: Unhandled Promise rejection: Attempted to assign to readonly property. ; Zone: angular ; Task: Promise.then ; Value: TypeError: Attempted to assign to readonly property.
CONSOLE ERROR file:///app/tns_modules/zone.js/dist/zone-node.js:421:23: Error: Uncaught (in promise): TypeError: Attempted to assign to readonly property.
CONSOLE LOG file:///app/Pages/Home/home.component.js:99:32: scanning complete

Answer 1

问题是，一旦您进入 Promise，您就处于不同的上下文中； "this" 不再指向你认为的 "this"，所以你需要将 "this" 保存到另一个变量中；有些人使用 "that"、"self" 甚至“_this”...

所以这个问题的解决方案是；

bluetoothAdd() {
    this.isScanning = true;
    var plusIcon = this.page.getViewById("add");
    plusIcon.style.opacity = 0;

    var self = this; // THIS LINE ADDED

    bluetooth.hasCoarseLocationPermission().then(
        function (granted) {
            if (!granted) {
                bluetooth.requestCoarseLocationPermission();
            } else {
                bluetooth.startScanning({
                    serviceUUIDs: ["133d"],
                    seconds: 4,
                    onDiscovered: function (peripheral) {
                        console.log("Periperhal found with UUID: " + peripheral.UUID);
                    }
                }).then(function () {
                    console.log("scanning complete");
                    self.isScanning = false; // CHANGED!
                    plusIcon.style.opacity = 1;
                }, function (err) {
                    console.log("error while scanning: " + err);
                });
                self.isScanning = false; // CHANGED!
            }
        });
}

ES6 方法更新 -- 您也可以使用 ES6 箭头函数 => 例如，您可以将第一行更改为：

   bluetooth.hasCoarseLocationPermission().then(
            (granted) => {

在这种情况下，因为您使用了 ES6 箭头函数，所以 this 将自动来自父作用域；这样您就不需要使用 self、_this 或 that 技巧。

从 NativeScript 2.4 开始，iOS 和 Android 都支持 ES6。

尝试分配给 readonly 属性即使相同的命令在其他地方有效？

Attempted to assign to readonly property even though same command works elsewhere?

javascript

angularjs

nativescript

尝试分配给 readonly 属性 即使相同的命令在其他地方有效？

Attempted to assign to readonly property even though same command works elsewhere?

javascript

angularjs

nativescript

尝试分配给 readonly 属性即使相同的命令在其他地方有效？