HarmonyOS 对象数组在使用@Observed和@ObjectLink驱动子组件UI更新时的问题

class类对象必须是要new出来的，属性的变化才能触发UI刷新。针对发送网络请求得到的json字符串解析后无法刷新的问题，可以通过引入三方库reflect-metadata和class-transformer来解决，参考示例如下：

import { promptAction } from '@kit.ArkUI';
import { plainToClass, Type } from 'class-transformer';
import 'reflect-metadata';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  @State list: Person[] = [new Person('Peppa1', '12'), new Person('Peppa2', '12'), new Person('Peppa3', '12')]
  @State list2: Person[] = []

  aboutToAppear(): void {
    let responseObjRaw: ResponseObj = new ResponseObj();
    //模拟从接口获取数据
    responseObjRaw.data = this.list
    console.log(`拟从接口获取数据，字段为data,值为：${JSON.stringify(responseObjRaw)}`)
    let responseObj: ResponseObj = plainToClass(ResponseObj, responseObjRaw);
    this.list2 = this.list.concat(responseObj.data);
    console.log(`aboutToAppear ${JSON.stringify(this.list2)}`)
  }

  build() {
    Column() {
      List() {
        ForEach(this.list2, (item: Person) => {
          ListItem() {
            TestComp({ item: item })
          }
        }, (item: Person) => JSON.stringify(item.name))
      }
    }.width('100%').height('100%').justifyContent(FlexAlign.Center)
  }
}

@Observed
class Person {
  constructor(name: string, age: string) {
    this.name = name;
    this.age = age;
  }
  name: string
  age: string
}

@Component
struct TestComp {
  @ObjectLink
  item: Person
  @State @Watch('change') num: number = 0

  change() {
    promptAction.showToast({ message: `：${JSON.stringify(this.num)}` })
  }

  build() {
    Column() {
      Text(JSON.stringify(this.num))
      Text(JSON.stringify(this.item))
      Text(this.item.name)
        .backgroundColor(Color.Red)
        .width('100%')
        .textAlign(TextAlign.Center)
        .onClick(() => {
          this.item.name = Date.now().toString()
          this.num = this.num + 1
          console.log(`num: ${this.num}`);
          console.log(`item: ${JSON.stringify(this.item)}`);
        })
    }.justifyContent(FlexAlign.Center)
  }
}

class ResponseObj {
  @Type(() => Person)
  data: Person[] = [];
}
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.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.

可以使用ohpm 引入三方库
ohpm install class-transformer
ohpm install reflect-metadata
1.
2.
3.