HarmonyOS 关于数组包裹对象中更新组件问题

以下代码中Info对象中real_name字段期望点击griditem的时候更新reanl_name信息这个如何实现啊,目前是数组更新了,但是real_name没及时更新。

import { ObservedArray } from '@ohos/common'
@Preview
@Component
export struct GridTest {
  @State beanList: ObservedArray<Info> = []
  aboutToAppear(): void {
    this.beanList.push(new Info("1"))
    this.beanList.push(new Info("2"))
    this.beanList.push(new Info("3"))
    this.beanList.push(new Info("4"))
    this.beanList.push(new Info("5"))
    this.beanList.push(new Info("6"))
    this.beanList.push(new Info("7"))
  }

  build() {
    Column() {
      Grid() {
        ForEach(this.beanList, (item: Info, index) => {
          GridItem() {
            Column() {
              Text(item.real_name)
                .fontColor($r('app.color.scaffold_fg_dark_2'))
                .fontSize(12)
                .padding({ top: 5, bottom: 2 })
                .maxLines(1)
                .textAlign(TextAlign.Center)
                .visibility(Visibility.Visible)
            }
          }.borderRadius(8)
          .size({width:80,height:80})
          .backgroundColor(Color.Red)
          .borderWidth(0).onClick(() => {
            this.beanList[index].real_name = index + "SS"
            console.log("-----onClick-grid---" + this.beanList[index].real_name + ",," + item.real_name)
          })
        }, (item: Info) => JSON.stringify(item))
      }
      .rowsGap(10)
      .columnsGap(16)
      .padding({
        bottom: 12,
        top: 10
      })
    }.width("100%").backgroundColor($r('app.color.color_ffffff'))
  }
}
@Observed
export class Info {
  constructor(real_name: string) {
    this.real_name = real_name
  }
  real_name?: string = '';
}
  • 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.
HarmonyOS
2024-12-23 16:28:33
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
aquaa

请参考下方代码:

@Observed
export class ObservedArray<T> extends Array<T> {
  constructor(args?: T[]) {
    if (args instanceof Array) {
      super(...args);
    } else {
      super();
    }
  }
}

@Observed
export class Info {
  constructor(real_name: string) {
    this.real_name = real_name
  }
  real_name?: string = '';
}

@Entry
@Component
export struct GridTest {
  @State beanList: ObservedArray<Info> = []
  aboutToAppear(): void {
    this.beanList.push(new Info("1"))
    this.beanList.push(new Info("2"))
    this.beanList.push(new Info("3"))
    this.beanList.push(new Info("4"))
    this.beanList.push(new Info("5"))
    this.beanList.push(new Info("6"))
    this.beanList.push(new Info("7"))
  }

  build() {
    Column() {
      Grid() {
        ForEach(this.beanList, (item: Info, index) => {
          GridItem() {
            ItemInfo({itemInfo:item,itemIndex:index})
          }.borderRadius(8)
          .size({width:80,height:80})
          .backgroundColor(Color.Red)
        }, (item: Info) => JSON.stringify(item))
      }
      .rowsGap(10)
      .columnsGap(16)
      .padding({
        bottom: 12,
        top: 10
      })
      Button('click').onClick(()=>{
        console.log("-----onClick-grid---" + JSON.stringify(this.beanList))
      })
    }.width("100%").backgroundColor(Color.White)
  }
}

@Component
struct ItemInfo {
  @ObjectLink itemInfo: Info;
  @State itemIndex: number=0;
  handleLiked() {
    this.itemInfo.real_name = this.itemIndex + 'Ss';
  }
  build() {
    Row() {
      Text(this.itemInfo.real_name)
    }.width('100%')
    .height('100%')
    .onClick(() => this.handleLiked())
  }
}
  • 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.

每个属性都要实例化,通过json解析,ArkUI无法监听对象中数组属性的push变化,json解析的为非class对象,class内的属性变化不能被观察到。

分享
微博
QQ
微信
回复
2024-12-23 18:47:59


相关问题
HarmonyOS 对象数组排序问题
548浏览 • 1回复 待解决
HarmonyOS 数组对象的排序
683浏览 • 1回复 待解决
HarmonyOS 关于WrapperBuilder更新问题
375浏览 • 1回复 待解决
关于发布证书更新问题
791浏览 • 1回复 待解决
HarmonyOS 关于APP版本升级更新问题
368浏览 • 1回复 待解决
HarmonyOS 数组对象数据刷新
546浏览 • 1回复 待解决
如何判断一个对象是否在对象数组
2952浏览 • 1回复 待解决
HarmonyOS @State可以修饰对象数组
425浏览 • 1回复 待解决
HarmonyOS @state可以修饰对象数组
391浏览 • 1回复 待解决