HarmonyOS 界面和数据问题？

Question

有个较为复杂的数据结构，有多层嵌套，其中每个类有多个成员变量和一个数组变量，成员变量大部分为基本类型，数组变量是另一个类的数组，其中每个成员变量都可修改，如下简单示例：

@Observed
class A{
  a:number[]=[];
}
@Observed
class AA{
  aa:A[]=[new A()];
}
@Observed
class AAA{
  aaa:AA[]=[new AA()];
}
@Observed
class AAAA{
  aaaa:Array<AAA>=[new AAA()];
}
@Preview
@Entry
@Component
struct MainPage {
  @State tag:AAAA=new AAAA();
  build() {
    Row(){
      Column({space:20}) {
        Sub({tag:this.tag})
        Row(){
          Button("AAAA+").onClick(()=>{
            this.tag.aaaa.push(new AAA())
          })
          Button("AAAA-").onClick(()=>this.tag.aaaa.splice(0,1))
        }


      }.width('100%')
    }.height('100%')
  }
}
@Component
struct Sub{
  @ObjectLink tag:AAAA;
  build() {
    Column({space:20}){
      Text("AAAA.aaaa.len:"+this.tag.aaaa.length).onClick(()=>this.tag.aaaa.push(new AAA()))
      ForEach(this.tag.aaaa,(aaa:AAA)=>{
        Text("AAA.aaa.len:"+aaa.aaa.length)
        ForEach(aaa.aaa,(aa:AA)=>{
          Text("AA.aa.len:"+aa.aa.length)
          ForEach(aa.aa,(a:A)=>{
            Text("A.a.len:"+a.a.length)
            ForEach(a.a,(v:number)=>{
              Text(v+"")
            })
          })
        })
      })
    }
  }
}

现在有两个按钮，前一个增加tag中数组长度，后面一个减少长度，要求更新后在界面中显示，请问应该怎么做？

Answer 1

可以按照下面修改：

@Observed
class A{
  a:number[]=[];
  constructor(a: number[]) {
    this.a = a
  }
}
@Observed
class AA{
  aa:A[];
  constructor(aa: A[]) {
    this.aa = aa
  }
}
@Observed
class AAA{
  aaa:AA[];
  constructor(aaa: AA[]) {
    this.aaa = aaa
  }
}
@Observed
class AAAA{
  aaaa:Array<AAA>;

  constructor(aaaa: AAA[]) {
    this.aaaa = aaaa
  }
}
@Preview
@Entry
@Component
struct MainPage {
  @State tag:AAAA = new AAAA([new AAA([new AA([new A([1])])])]);
  build() {
    Row(){
      Column({space:20}) {
        Sub({tag:this.tag})
        Row(){
          Button("AAAA+").onClick(()=>{
            this.tag = new AAAA(this.tag.aaaa.concat(new AAA([new AA([new A([2])])])))
          })
          Button("AAAA-").onClick(()=>{
            this.tag.aaaa.splice(0,1)
            console.log('aaa---',this.tag.aaaa)
            this.tag = new AAAA(this.tag.aaaa)
          })
        }
      }.width('100%')
    }.height('100%')
  }
}
@Component
struct Sub{
  @ObjectLink tag:AAAA;
  build() {
    Column({space:20}){
      Text("AAAA.aaaa.len:"+this.tag.aaaa.length)
      ForEach(this.tag.aaaa,(aaa:AAA)=>{
        Text("AAA.aaa.len:"+aaa.aaa.length)
        ForEach(aaa.aaa,(aa:AA)=>{
          Text("AA.aa.len:"+aa.aa.length)
          ForEach(aa.aa,(a:A)=>{
            Text("A.a.len:"+a.a.length)
            ForEach(a.a,(v:number)=>{
              Text(v+"")
            })
          })
        })
      })
    }
  }
}