RadListView 没有响应 ObservableArray 中的新项目答案

【问题标题】：RadListView not responding to new items in an ObservableArrayRadListView 没有响应 ObservableArray 中的新项目
【发布时间】：2019-10-11 01:43:13
【问题描述】：

我正在尝试使用 RadListView 呈现图像列表。由于当数据来自普通数组时我有一些奇怪的行为，所以我决定按照文档中的建议尝试 ObservableArray。（特别是 tns-vue）

问题是，将新项目推送到模型并不会更新视图。该项目在那里，但没有显示任何内容。

这是我的 RadListView：

 <RadListView layout="grid" ref="newImages" for="image in newImages">
              <v-template>
                <ImageComponent
                  showDate="false"
                  :onLongPress="()=>{onLongPress(image)}"
                  :image="image"
                ></ImageComponent>
              </v-template>
            </RadListView>

“newImages”数组：

 data() {
    return {    
      newImages: new ObservableArray([]),     
    };
  }

我使用相机插件将项目添加到数组中：

openGallery() {
      var that = this;
      console.log(that.newImages.length);
      var context = imagepicker.create({ mode: "multiple" }); // use "multiple" for multiple selection
      context
        .authorize()
        .then(function() {
          return context.present();
        })
        .then(function(selection) {
          const images = [];
          selection.forEach(function(selected) {
            const image = that.createNewFileSchema(selected._android);
            images.push(image);
          });
           that.newImages.push(images)//This adds the images to the array, but UI doesn't respond to the change.

        })
        .catch(function(e) {
          alert(e);
        });
    },

这可能是什么问题？

【问题讨论】：

您能否分享一个可以重现问题的最小 Playground 示例？
说实话，我不知道该怎么做，因为问题只发生在这个相机插件回调中。如果我从一个虚拟函数手动“推送”一个新图像，它就不会发生。完全相同的对象结构，但由于某种原因它可以工作。也许这可以给你一些线索？它可能与相机功能的异步性质有关吗？虽然我尝试使用异步虚拟函数，但它确实有效......
Manoj，我发现使用普通 ListView 而不是 RadListView 时一切正常。我需要 RadListView 的唯一原因是 layout="grid" 选项（它允许我以“两对”的形式呈现图像）。使用 Rad 的替代方法是什么，但仍能实现这种网格外观？我唯一的选择是将我的数据数组成对分组，然后嵌套循环吗？
这只是出乎意料的 sheff2k1，但你介意绑定你的迭代器吗？所以
但是我认为这会产生多个 RadListView 组件..无论如何都行不通

标签： android nativescript

【解决方案1】：

您将数组推送到数据数组，为了让虚拟 DOM 注意到这些变化，您可能不想使用深度观察器，调用返回更新后数组的方法。

对象也会有同样的问题，但是你可以使用：

this.$set(<object>, <key>, <value>)

我不确定数组是否有更好的方法，但您可以尝试上述的观察者

watch: {
   newImages: {
      handler: function(<value>, <oldValue>) {},
      deep: true
   }
}

已更新 - 您可以将 this.$set 用于数组 https://vuejs.org/v2/api/#Vue-set

/*   this.$set(<Array>, <Index>, <Value>)   */

this.$set(this.newImages, this.newImages.length, [...newArrWithImages])

这个人解释了响应式更新数组：Vuejs and Vue.set(), update array

【讨论】：

你能举个例子“你可能不想使用深度观察者，调用返回更新数组的方法。”？