Angular 5，离子3数据在Http后请求成功时没有绑定

Question

我正在尝试在鼠标向上事件上实现 http post 请求，它在浏览器中工作正常，当我在手机上测试它时，接收到的数据没有绑定到 Http post 请求成功时声明的变量。我必须点击屏幕上的某处才能将数据绑定到变量并显示结果。

我的鼠标向上事件代码：

ionViewDidLoad() {
 this.canvas.on('mouse:up', (o) => {
   if (this.isAutoDraw) {
    var image = this.canvas.toDataURL("image/png");
    this.autoDrawRequest(image)
   }
 });
}

HTTP 发布请求的代码

imgList;
autoDrawRequest(img){
  this._Manager.autoDrawServer(img).subscribe(
   data => {
    console.log(data);
    imgList = data;
   },
   error => {
    this.isError = true;
    this._Util.showToast("Error");
 });
}

网页代码

<div *ngFor="let img of imgList>
  {{img}}
</div>

成功时控制台的数据正在打印，但是直到我点击屏幕上的某个位置，我尝试在html中显示的值才会显示。

我正在研究自动绘制..所以在每个笔画上我想给出一些建议..

任何帮助将不胜感激。

Answer 1

您似乎正在鼠标向上事件上调用autoDrawRequest函数。当您点击屏幕时，它将更新。如果要在加载时执行此操作，只需将其移出画布事件即可。

ionViewDidLoad() {
  if (this.isAutoDraw) {
    var image = this.canvas.toDataURL("image/png");
    this.autoDrawRequest(image)
  }
}

您可以在文档中了解有关离子生命周期事件的更多信息。