HarmonyOS 鸿蒙Next 使用class-transformer转换解析后,被@ObservedV2 修饰类中被@Trace修饰的变量改变是否不会刷新UI

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

HarmonyOS 鸿蒙Next 使用class-transformer转换解析后,被@ObservedV2 修饰类中被@Trace修饰的变量改变是否不会刷新UI

深色代码主题
复制
export class BrandsIndex {
@Expose({ name: ‘key’ })
key: string = ‘’;
@Expose({ name: ‘name’ })
name: string = ‘’;
@Type(() => Brand)
@Expose({ name: ‘brands’ })
brands: Brand[] = [];

}

深色代码主题
复制
@ObservedV2
export class Brand {
@Expose({ name: ‘key’ })
key: number;
@Expose({ name: ‘name’ })
name: string;
@Trace isSelected: boolean = false;

}

使用class-transformer转换解析后,改变isSelected值UI不会刷新;

若果不使用后台返回数据,我自己造假数据是可以的


更多关于HarmonyOS 鸿蒙Next 使用class-transformer转换解析后,被@ObservedV2 修饰类中被@Trace修饰的变量改变是否不会刷新UI的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

10 回复

我知道了

使用class-transformer 解析嵌套类需要[@Type](/user/Type)

[@Type](/user/Type)(() => BrandsIndex)

  [@Expose](/user/Expose)({ name: 'brands_index' })

  brandsIndex: BrandsIndex[] = [];

 [@Type](/user/Type)(() => Brand)

  [@Expose](/user/Expose)({ name: 'brands' })

  brands: Brand[] = [];

更多关于HarmonyOS 鸿蒙Next 使用class-transformer转换解析后,被@ObservedV2 修饰类中被@Trace修饰的变量改变是否不会刷新UI的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


可以参考,嵌套类场景[@Trace](/user/Trace)装饰对象数组:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-new-observedv2-and-trace-V5#trace%E8%A3%85%E9%A5%B0%E5%AF%B9%E8%B1%A1%E6%95%B0%E7%BB%84

注意:[@ObservedV2](/user/ObservedV2)装饰class。需要放在class的定义前,使用new创建类对象。直接引用会导致组件不刷新

参考装饰器说明:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-new-observedv2-and-trace-V5#%E8%A3%85%E9%A5%B0%E5%99%A8%E8%AF%B4%E6%98%8E

“data”: { “aggregations”: { “brands_has_more”: true, “brands_index”: [ { “brands”: [], “key”: “all”, “name”: “全部” }, { “brands”: [ { “key”: 2775, “name”: “Albalon” } ], “key”: “a”, “name”: “A” } ] } }

@ObservedV2 export class Brand { @Expose({ name: ‘key’ }) key: number=0; @Expose({ name: ‘name’ }) name: string=’’; @Trace isSelected: boolean = false; }

export class BrandsIndex { @Expose({ name: ‘key’ }) key: string = ‘’; @Expose({ name: ‘name’ }) name: string = ‘’; @Type(() => Brand) @Expose({ name: ‘brands’ }) brands: Brand[] = [];

constructor(key: string, name: string, brands: Brand[]) { this.key = key; this.name = name; this.brands = brands; } } @Param brand: Brand=new Brand(); 从其它组件接收,new也不行

从其他组件接收后可以push到当前当前组件参数中,参考下面demo

@ObservedV2 export class Brand { key: number = 0; name: string = ‘’; @Trace isSelected: boolean = false; }

@ObservedV2 export class BrandsIndex { key: string = ‘’; name: string = ‘’; @Trace brands: Brand[] = [];

constructor(key: string, name: string, brands: Brand[]) { this.key = key; this.name = name; this.brands = brands; } }

@Entry @ComponentV2 struct ObservedV2TraceDemo2 { brandsIndex: BrandsIndex = new BrandsIndex(“a”, “A”, [new Brand(), new Brand(), new Brand()]);

build() { NavDestination() { Scroll() { Column() { Text(length: ${this.brandsIndex.brands.length}) .fontSize(40)

      Divider()
      
      ForEach(this.brandsIndex.brands, (item: Brand, index: number) => {
        Text(`${item.isSelected}`)
          .fontSize(40)
          .onClick(() => {
            this.brandsIndex.brands[index].isSelected = !this.brandsIndex.brands[index].isSelected;
          })
      })

      Divider()

      ForEach(this.brandsIndex.brands, (item: Brand, index: number) => {
        Text(`${index} ${item.isSelected}`)
          .fontSize(40)
      })
      
      Divider()
      
      Button("add Brand")
        .onClick(() => {
          this.brandsIndex.brands.push(new Brand())
        })
    }
  }
}

} }

我知道了,使用class-transformer 解析嵌套类需要@Type @Type(() => BrandsIndex)

@Expose({ name: ‘brands_index’ })

brandsIndex: BrandsIndex[] = [];

@Type(() => Brand)

@Expose({ name: ‘brands’ })

brands: Brand[] = [];

深色代码主题
复制
import { hilog } from '@kit.PerformanceAnalysisKit';
import { plainToInstance } from 'class-transformer';

@ObservedV2 class Bean { @Trace text: string = “bean” }

@Entry @ComponentV2 struct Index { private str: string = {"text":"jsonText"} @Local bean: Bean = new Bean()

aboutToAppear(): void { let j: Bean = JSON.parse(this.str) j = plainToInstance(Bean, j) this.bean = j }

build() { Column() { Button(this.bean.text) .onClick(() => { this.bean.text = ‘onClick’ }) }.onVisibleAreaChange([0, 1], (isShow) => { hilog.debug(0x000000, ‘rainrain’, 'index isShow == ’ + isShow) }) } }

let result = await efRcpClientApi.post<BaseResponse<object>>({ headers: this.mHeaders, baseURL: ‘https://xxx.com’, url: ‘xxxx’, query: param });

if (result.data?.status === '0') {
  const json = result.data.data as object;
  this.mData = plainToClass(SearchResultModel, json);
  LogUtil.info(TAG, 'xxx=' + this.mData)
} else {
  LogUtil.error(TAG, `xxx failed! Error message is ${result.error}`);
}   请问我是这样请求数据的,咋改,谢谢

打印出来的 this.mData对吗?

“data”: { “aggregations”: { “brands_has_more”: true, “brands_index”: [ { “brands”: [], “key”: “all”, “name”: “全部” }, { “brands”: [ { “key”: 2775, “name”: “Albalon” } ], “key”: “a”, “name”: “A” } ] } } 数据结构是这种

在HarmonyOS鸿蒙Next中,使用class-transformer转换解析后,@ObservedV2 修饰的类主要用于数据绑定和UI刷新。而@Trace 修饰的变量一般用于性能跟踪或调试目的,并不直接涉及数据绑定机制。

具体来说,@ObservedV2 确保了当被修饰类的属性发生变化时,UI层能够自动感知并刷新。这种机制依赖于系统内部的数据绑定框架,用于实时更新界面。而@Trace 修饰的变量,其变化通常不会触发UI刷新,因为它不是为数据绑定设计的。

因此,即使使用class-transformer对类进行转换解析,只要@ObservedV2 修饰的类的属性发生变化,UI应该能够正常刷新。而@Trace 修饰的变量改变,则不会影响UI的刷新行为。

如果在实际应用中遇到@ObservedV2 修饰的类中属性变化但UI未刷新的问题,可能的原因包括但不限于:

  • 属性变化未触发通知(例如,直接修改属性而未通过setter方法)。
  • 数据绑定框架未正确初始化或配置。
  • 转换解析过程中存在错误,导致数据绑定失效。

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

回到顶部