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

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](/user/ObservedV2)
export class Brand {
  @Expose({ name: 'key' })
  key: number;
  @Expose({ name: 'name' })
  name: string;
  [@Trace](/user/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

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

  @Expose({ name: 'brands_index' })

  brandsIndex: BrandsIndex[] = [];

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

  @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

回到顶部