数据结构嵌套二维数组的情况下,如何监测数组数据的变化触发UI的刷新?

数据接口代码如下:

export class SubjectLeaderData{  
  
  backImg?: string  
  slogan?: string  
  leaderInfoList?: Array<SubjectLeaderDataLeaderInfoList>  
  politicalChannelId?: string  
  
}  
  
export class SubjectLeaderDataLeaderInfoList{  
  
  name?: string  
  position?: string  
  introduction?: string  
  img?: string  
  newsId?: string  
  headline?: string  
  specialDetailList?: Array<SubjectNewsDetailDataSpecialDetailList>  
  
}

specialDetailList赋值后,如何触发UI的刷新。

HarmonyOS
2024-09-30 09:46:13
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

使用@ObjectLink和@Observed类装饰器在涉及嵌套对象或数组的场景中进行双向数据同步:

被@Observed装饰的类,可以被观察到属性的变化;子组件中@ObjectLink装饰器装饰的状态变量用于接收@Observed装饰的类的实例,和父组件中对应的状态变量建立双向数据绑定。这个实例可以是数组中的被@Observed装饰的项,或者是class object中的属性,这个属性同样也需要被@Observed装饰。单独使用@Observed是没有任何作用的,需要搭配@ObjectLink或者@Prop使用。限制条件使用@Observed装饰class会改变class原始的原型链,@Observed和其他类装饰器装饰同一个class可能会带来问题。

@Observed装饰的类,如果其属性为非简单类型,比如class、Object或者数组,也需要被@Observed装饰,否则将观察不到其属性的变化。参考demo:

以下是嵌套类对象的数据结构。

let NextID: number = 1;  
  
@Observed  
class ClassA {  
  public id: number;  
  public c: number;  
  
  constructor(c: number) {  
    this.id = NextID++;  
    this.c = c;  
  }  
}  
  
@Observed  
class ClassB {  
  public a: ClassA;  
  
  constructor(a: ClassA) {  
    this.a = a;  
  }  
}  
  
@Observed  
class ClassD {  
  public c: ClassC;  
  
  constructor(c: ClassC) {  
    this.c = c;  
  }  
}  
  
@Observed  
class ClassC extends ClassA {  
  public k: number;  
  
  constructor(k: number) {  
    // 调用父类方法对k进行处理  
    super(k);  
    this.k = k;  
  }  
}

以下组件层次结构呈现的是嵌套类对象的数据结构。

@Component  
struct ViewC {  
  label: string = 'ViewC1';  
  @ObjectLink c: ClassC;  
  
  build() {  
    Row() {  
      Column() {  
        Text(`ViewC [${this.label}] this.a.c = ${this.c.c}`)  
          .fontColor('#ffffffff')  
          .backgroundColor('#ff3fc4c4')  
          .height(50)  
          .borderRadius(25)  
        Button(`ViewC: this.c.c add 1`)  
          .backgroundColor('#ff7fcf58')  
          .onClick(() => {  
            this.c.c += 1;  
            console.log('this.c.c:' + this.c.c)  
          })  
      }  
      .width(300)  
    }  
  }  
}  
  
@Entry  
@Component  
struct ViewB {  
  @State b: ClassB = new ClassB(new ClassA(0));  
  @State child : ClassD = new ClassD(new ClassC(0));  
  build() {  
    Column() {  
      ViewC({ label: 'ViewC #3', c: this.child.c})  
      Button(`ViewC: this.child.c.c add 10`)  
        .backgroundColor('#ff7fcf58')  
        .onClick(() => {  
          this.child.c.c += 10  
          console.log('this.child.c.c:' + this.child.c.c)  
        })  
    }  
  }  
}
分享
微博
QQ
微信
回复
2024-09-30 16:53:37
相关问题
HarmonyOS 二维数组刷新问题
242浏览 • 1回复 待解决
HarmonyOS 嵌套数组元素UI刷新方案
324浏览 • 1回复 待解决
HarmonyOS 数据结构咨询
187浏览 • 1回复 待解决
class刷新渲染数组
690浏览 • 1回复 待解决
数组嵌套数组场景懒加载实现
594浏览 • 1回复 待解决
嵌套Class属性变化无法触发UI渲染
238浏览 • 1回复 待解决
ForEach数组发生改变。UI刷新
500浏览 • 1回复 待解决
数组中元素变更如何触发刷新list?
275浏览 • 1回复 待解决
HarmonyOS 二维码生成demo
148浏览 • 2回复 待解决
数组列表如何实现数据双向同步?
300浏览 • 1回复 待解决