Question

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

但是视图中的数组未更新。如果我执行pull-to-refresh（我在其上调用相同的方法），则视图中的元素会更新。

我尝试包装我的代码部分，它覆盖了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();
  });
}

请帮助我！

更新

当我发出提醒并将旧帖子值与新帖子进行比较时，两者都会更新。问题肯定是不更新视图

更新2

我注意到，当我向视图添加一个按钮时，我调用相同的功能，视图也会更新...当我恢复应用程序时它就不会更新......

Answer 1

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

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

我说“可能在之前”，因为它是一个承诺，你无法确定它何时会返回。因此，在将posts分配给this.posts后，设置为newdistance值。

处理此问题的最佳方法是将您的承诺方法链接到一个接一个地执行，而不是并行执行。

另一种（更简单的方法）是仅在获得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(); });

Ionic2 ng为了不更新

1 个答案: