如何从解析平台检索对象并使用 Typescript 显示它们？

Question

我想检索一个存储在解析平台中的对象，并且我正在使用离子框架。 所以我在 Home.ts 中写了这段代码：

export class HomePage {
result: string = 'sample' ;

constructor(public navCtrl: NavController) {
Parse.serverURL = 'https://parseapi.back4app.com/';
Parse.initialize("MY_APP_ID", "MY_JS_KEY");
var GameScore = Parse.Object.extend("GameScore");
var query = new Parse.Query(GameScore);

query.get("wN9bVUA9Hu", {
  success: function(gameScore) {
    // The object was retrieved successfully.
     this.result = gameScore.get("score").toString();
     console.log(this.result);
  },
  error: function(object, error) {
    // The object was not retrieved successfully.
    // error is a Parse.Error with an error code and message.
  }
});
}

}

并且对象的 id 是 = wN9bVUA9Hu，因此应该检索对象的分数，即 9。 但正如你在这里看到的：result

Home.html 中的结果没有变化，但在控制台中为 9。

这是我的 Home.html 代码：

<ion-header>
  <ion-navbar>
     <ion-title>
  Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
   <h4>{{result}}</h4>
</ion-content>

如何解决这个问题并在 Home.html 中显示检索到的对象？

谢谢。

Answer 1

对不起，这对我来说应该很明显，但我的眼睛只是滑过这些东西。

var func1 = () => console.log(this.result);
var func2 = function { console.log(this.result); }

这两种说法不一样。在可能的情况下，如果您使用箭头函数（例如func1），您的理智将会得到改善。它们对 JavaScript 来说是较新的，所以您看到的许多示例都不会包含它们。

在箭头函数中this 指向函数内部与外部相同的对象。使用function 语法this 被重新分配给其他东西，具体取决于它的调用方式。所以在你的代码中，当你说this.result = gameScore.get("score").toString(); 时，问题是this 没有引用HomePage 的实例。

如果您需要保留 function 语法（一些库依赖于 this 的重新分配），那么您必须执行类似...

const self = this;
query.get("wN9bVUA9Hu", {
  success: function(gameScore) {
     self.result = gameScore.get("score").toString();
  },
  error: function(object, error) {
    // The object was not retrieved successfully.
    // error is a Parse.Error with an error code and message.
  }
});
}

Answer 2

Angular 在区域内包装了许多默认输入和输出事件（例如按钮点击、http 请求等）。这样，Angular 就知道什么时候发生了，并且知道既然发生了某些事情，它可能需要更新绑定。

然而，一些库（这里看起来 parse 正在执行）会发出 Angular 尚未包装且不知道的事件，因此代码最终可能会在区域之外运行。要解决此问题，您可以手动将代码放回区域。

尝试改变：

  success: function(gameScore) {
    // The object was retrieved successfully.
     this.result = gameScore.get("score").toString();
     console.log(this.result);
  }, 

成为：

  success: function(gameScore) {
    this.zone.run(() => {
      this.result = gameScore.get("score").toString();
      console.log(this.result);
    });
  },

您需要将private zone: NgZone 添加到您的构造函数中，并添加import { NgZone } from '@angular/core'; 以导入NgZone。

进一步阅读：

Angular 2 : what make a service to be "Outside" angular zone?

Triggering change detection manually in Angular

https://medium.com/@MertzAlertz/what-the-hell-is-zone-js-and-why-is-it-in-my-angular-2-6ff28bcf943e