鸿蒙数据响应式更新视图的问题:
1、基本数据类型和对象的第一层数据直接更改是可以做到视图更新的
@State message: string = 'Hello World' // 可以
@State obj={name:'',age:0} //第一层属性直接改变 可以
2、对象的嵌套深层属性 直接改变 就不能触发视图更新了
class C {
name: string = ''
age: number = 0
cc:{
ccc:string
}
}
@State obj:C = {
name:'zhangsan',
age:18,
cc:{
ccc:'123'
}
}
Button('按钮').onClick((event: ClickEvent) => {
this.obj.cc.ccc = '999'
}) //不可以
解决办法:
1、使用展开运算符 但是next版本不支持这样的写法
this.obj.cc.ccc='666'
this.obj.cc = {...this.obj.cc,this.obj.cc.ccc}
2、可以在定义数据的时候使用接口定义
interface A {
name:string
age:number
}
interface B {
b:string
bb:A
}
export class AModel implements A {
name: string = ''
age: number = 0
constructor(model: A) {
this.name = model.name
this.age = model.age
}
}
export class BModel implements B {
b: string = ''
bb: A = new AModel({} as A)
constructor(model: B) {
this.b = model.b
this.bb = model.bb
}
}
//定义数据
@State content:BModel = new BModel({
b:'',
bb:new AModel({
name:'zhangsan',
age:18
})
})
Button('按钮').onClick((event: ClickEvent) => {
this.content.bb.name = 'lisi' //可以更改
})