如何从解析平台检索对象并使用 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

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.

进一步阅读：

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

Answer 2

对不起，这对我来说应该是显而易见的，但我的眼睛却忽略了这些东西。

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.
  }
});
}

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

How to retrieve objects from parse platform and show them using Typescript?

javascript

typescript

ionic-framework

parse-server