如何在不刷新页面的情况下自动更新离子列表上的数据答案

【问题标题】：How to auto update data on ionic list without refreshing the page如何在不刷新页面的情况下自动更新离子列表上的数据
【发布时间】：2019-07-14 11:35:48
【问题描述】：

我创建了一个包含离子列表的页面，如果单击该按钮，则会有两个按钮调用 firebase api 并得到更新。它更新的，整个列表得到刷新。如何停止刷新整个列表。

 onLocationDataUpdate() {
    // Get current location
    this.geolocation.getCurrentPosition().then(position => {
      this.location.lat = position.coords.latitude;
      this.location.lng = position.coords.longitude;

      // Get location data from Firebase
      this.connectivityServiceService.getLocations(
        this.locatingRange,
        this.location.lat,
        this.location.lng
      );

      // Bind data to Ionic list
      this.dataSetSubscription = this.connectivityServiceService.geoPointLocationUpdateNotify.subscribe(
        locations => {
          const locationData = this.connectivityServiceService.getGeoPointLocations();
          if (locationData.length > this.maxDataCount) {
            const tempLocationData = locationData.slice(0, this.maxDataCount);
            tempLocationData.forEach(item => {
              if (item.feed_back === undefined) {
                item = Object.assign(item, {
                  feed_back: { count: 0, positive: [], negative: [] }
                });
              }
            });
            this.geoPointLocationData = tempLocationData;
            this.loader.dismiss();
          } else {
            const tempLocationData = locationData;
            tempLocationData.forEach(item => {
              if (item.feed_back === undefined) {
                item = Object.assign(item, {
                  feed_back: { count: 0, positive: [], negative: [] }
                });
              }
            });
            this.geoPointLocationData = tempLocationData;
            this.loader.dismiss();
          }
        }
      );
    });
  }

【问题讨论】：

你是替换现有模型还是推向它？
看来我要换了。现有模型
那么请尝试将新数据推送到模型中。希望它能解决问题。
是的，它解决了这个问题。谢谢！它现在正在工作。

标签： angular ionic-framework ionic4

【解决方案1】：

我知道您已经满意地解决了这个问题，但您确实在这里遇到了一些问题。

只需将新数据推送到模型，您就会看到它更新，但实际上它正在重新创建整个列表。

如果数据变长，那么这可能会给您带来性能问题。此时您应该查看trackBy。

这是一种为 Angular 提供跟踪列表中每个单独项目的方法，以便在更新它时，Angular 可以找出哪些实际需要更新，然后只更改它们。

这似乎是decent introduction to the topic。

【讨论】：