数据结构嵌套二维数组的情况下，如何监测数组数据的变化触发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>  
  
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

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

HarmonyOS

put_get

2024-09-30 09:46:13

1404浏览

回答 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;  
  }  
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.

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

@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)  
        })  
    }  
  }  
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.

2024-09-30 16:53:37

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

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

订阅鸿蒙技术特刊，精选内容抢先看