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
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
我知道了
使用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创建类对象。直接引用会导致组件不刷新
“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())
})
}
}
}
} }
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