HarmonyOS 鸿蒙Next 数组元素对象属性变化，数组API绑定的UI没有刷新

发布于 1周前 作者 h691938207 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 数组元素对象属性变化，数组API绑定的UI没有刷新

如下代码，当点击时，Image组件中this.data元素明明变化了，但是Image展示的图片没有刷新，这是为什么？

@Component
export struct AAAView {
  @State data: MealAddressModel[] = [new MealAddressModel(), new MealAddressModel()]

  build() {
    Row() {
      Image(
        this.data.every(f => f.isSelect === true) ?
        $r(‘app.media.icon_common_sel_weight_red’) :
        $r(‘app.media.icon_common_un_sel_weight’)
      )

      Text(‘全选’)
    }
    .onClick(() => {
      const isAllSel = this.data.every(f => f.isSelect === true)
      this.data.forEach(f => f.isSelect = !isAllSel)
    })
  }
}

@Observed
export class MealAddressModel {
  receiveAddress?: string
  isSelect: boolean = false
}


更多关于HarmonyOS 鸿蒙Next 数组元素对象属性变化，数组API绑定的UI没有刷新的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
3 回复

考虑使用状态管理（V2）版本进行UI监听，使用ObservedV2装饰器和[@Trace](/user/Trace)装饰器观测类属性变化

[@Entry](/user/Entry)
[@ComponentV2](/user/ComponentV2)
export struct AAAView {
  [@Local](/user/Local) data: MealAddressModel[] = [new MealAddressModel(), new MealAddressModel()]

build() {
Column() {
Row() {
Image(
this.data.every(f => f.isSelect === true) ?
$r(‘app.media.photo_12668’) :
$r(‘app.media.background’)
).height(‘100px’)
}


  Row() {
    Text(<span class="hljs-string">'全选'</span>).height(<span class="hljs-string">"80"</span>)
      .onClick(() =&gt; {
        <span class="hljs-keyword">const</span> isAllSel = <span class="hljs-keyword">this</span>.data.every(f =&gt; f.isSelect === <span class="hljs-literal">true</span>)
        <span class="hljs-keyword">this</span>.data.forEach(f =&gt; f.isSelect = !isAllSel)
        console.log(<span class="hljs-string">"1111"</span>)
      })
  }

}

}
}


@ObservedV2
export class MealAddressModel {
receiveAddress?: string
@Trace isSelect: boolean = false
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

执行效果：

cke_6473.pngcke_7579.png

更多关于HarmonyOS 鸿蒙Next 数组元素对象属性变化，数组API绑定的UI没有刷新的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


目前有一种方案就是改变整个数组，重新赋值。

但是对象会频繁创建，有没有更好的方法可以让 UI 监听到变化呢？？？？
 

.onClick(() => {

   const isAllSel = this.data.every(f => f.isSelect === true)
   this.data.forEach(f => f.isSelect = !isAllSel)
   this.data = this.data.map(m => m.newModel(m))

})

在HarmonyOS鸿蒙Next系统中，当数组元素对象的属性发生变化时，如果数组API绑定的UI没有刷新，这通常是因为数据绑定机制未能及时捕捉到变化。HarmonyOS采用了数据绑定和响应式编程模型，但在某些情况下，需要确保数据变化能够被系统正确识别和触发UI更新。

可能的原因包括：

  1. 数据变更未触发通知：如果数组中的对象属性变化是通过直接赋值而非通过特定的数据绑定接口进行，系统可能无法感知到这一变化。
  2. UI组件未正确绑定：检查UI组件是否通过正确的属性与数组进行了绑定，确保绑定路径无误。
  3. 数据上下文问题：在复杂的数据结构中，确保数据上下文（如页面或组件的上下文）在数据变化时依然有效。

解决方法可以尝试：

  • 使用系统提供的数据绑定API确保属性变化能被捕捉，如使用@Bindable注解和notifyPropertyChanged方法。
  • 验证数组与UI组件的绑定关系，确保路径和属性名正确无误。
  • 检查数据变化是否在UI组件的生命周期内发生，避免组件销毁后数据更新无效。

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部