javascript - View 中的 Ionic2 ngFor 未更新

Question

我的应用程序中有元素列表，并在 *ngFor 中打印它们。当应用程序恢复时，我调用一个方法通过执行 http-Request 从服务器加载新元素。在这个方法中，我将项目设置为数组的元素。

但是， View 中的数组并未更新。如果我执行拉动刷新(我调用相同的方法)， View 中的元素就会更新。

我尝试包装我的代码部分，该部分覆盖 ngZone 的 .run() 或 setTimeout() 中的旧数组，但没有任何效果。还尝试了 ChangeDetectorRef，也没有成功。

现在我没有任何想法......

这是我迄今为止尝试过的:

this.zone.run(() =>{
   this.posts = posts; // "posts" is the array of elements i got from http-request
                       // "this.posts" the array for the view
});

还有

setTimeout(() => {
   this.posts = posts;
}, 10);

和

this.posts = posts;
this.changedetectorRef.detectChanges(); //also tried markForCheck()

我的代码:

查看:

<ion-item-sliding *ngFor="let post of posts" >
    <ion-item>
        <p>{{post.newdistance}}</p>
    </ion-item>
</ion-item-sliding>

对应的.ts文件:

loadPosts() {
  let loading = this.loadingController.create({
    content: "Einen Moment bitte...",
    spinner: "crescent"
  });

  loading.present();

  this.postsService.getPostsFromServer().then(posts => {

    posts.forEach((post, index) => {

        this.geolocationService.getDistance(post.latitude, post.longitude).then(distance => {
            post.newdistance = distance;
        });

    });

    this.posts = posts; // <---- what to do here ???
    loading.dismiss();

  })
  .catch(() => {
    loading.dismiss();
  });
}

请帮助我!

更新

当我发出警报并将旧的发布值与新的发布值进行比较时，两者都会更新。问题肯定是未更新 View

更新2

我注意到，当我向调用相同函数的 View 添加按钮时， View 也会更新...只是当我恢复应用程序时它不会更新...

Answer 1

代码的 this.posts = posts; 部分可能在

之前执行

this.geolocationService.getDistance(post.latitude, post.longitude).then(distance => {
            post.newdistance = distance;
        });

我说“可能之前”，因为这是一个 promise ，你无法确定它到底什么时候返回。因此，在将 posts 分配给 this.posts 之后，就会设置 newdistance 值。

处理这个问题的最佳方法是将您的 Promise 方法链接起来依次执行，而不是并行执行。

另一种(更简单的方法)是仅在获得 newdistance 值后将每个 post 推送到 this.posts 中。请记住，您应该使用新数组来推送帖子，如下所示:

  //at the top of you page declare a new postsArray variable
  postsArray = [];
  this.postsService.getPostsFromServer().then(posts => {

    posts.forEach((post, index) => {

        this.geolocationService.getDistance(post.latitude, post.longitude).then(distance => {
            post.newdistance = distance;
            // Here we push the new post into the posts array
            this.postsArray.push(post);
        });

    });

    loading.dismiss();

  })
  .catch(() => {
    loading.dismiss();
  });