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.result = gameScore.get（“ score”）。toString（）; 时，问题是 this 并未引用主页。

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

  const self = this;
query.get（“ wN9bVUA9Hu”，{
  成功：function（gameScore）{
     self.result = gameScore.get（“ score”）。toString（）;
  }，
  错误：函数（对象，错误）{
    //未成功检索对象。
    //错误是具有错误代码和消息的Parse.Error。
  }
}）;
}

Answer 2

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

但是，某些库（看起来好像是在这里解析）会发出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

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

2 个答案: