HarmonyOS List的item中的某个字段改变之后如何刷新页面展示

通过接口返回list的数据 通过LazyForEach循环添加listItem。listitem中如果topstatus是'1'则展示置顶文字。

if ('1' == this.comment.topStatus) {
  Text('置顶').fontSize(12).fontColor($r('app.color.color_FF5924')).margin({ right: 8 })
}

点击item会请求接口让该item中的topStatus字段设置为'1'。

this.forEach((item, index) => {
  if (!this.isLoadingMoreItem(item)) {
    let itemDate = (item as CommentBean)
    if (itemDate.id == commentBean.id) {
      (this[index] as CommentBean).topStatus = isToTop ? '1' : '0'
      CommonConstants.showToastContent(isToTop ? '置顶成功' : '取消置顶成功')
    }
  }
})

但最终的效果是UI没有变化 请问下应该如何实现刷新?

HarmonyOS
2024-12-26 14:50:49
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Excelsior_abit

可以使用@State和@Observed, 父组件和Entry中调用的组件建立双向连接,这样就可以实现数据的局部刷新了,Demo如下:

@Component
struct Child {
  @Link items: TestList[];
  build() {
    Column() {
      ForEach(this.items, (item: TestList) => {
        ChildChild({ item: item });
      })
      Button(`Button: push`).onClick(() => {
        this.items[0].index1 = 3;
        this.items[0].str = 'Third';
      })
    }
  }
}

@Component
struct ChildChild {
  @State item: TestList = new TestList();
  build() {
    Column() {
      Text(`${this.item.index1}+'-----'${this.item.str}`)
    }
  }
}
@Entry
@Component
struct Parent {
  @State arr: TestList[] = [];
  aboutToAppear() {
    let test1: TestList = new TestList();
    test1.index1 = 1;
    test1.str = 'First';
    this.arr.push(test1)
    let test2: TestList = new TestList();
    test2.index1 = 2;
    test2.str = 'Second';
    this.arr.push(test2)
  }
  build() {
    Column() {
      Child({ items: this.arr })
      Button(`Button: push`).onClick(() => {
        this.arr[1].index1 = 4;
        this.arr[1].str = 'Fourth';
      })
    }
  }
}
@Observed
class TestList {
  index1: number = 0;
  str: string = '';
}
分享
微博
QQ
微信
回复
2024-12-26 16:32:56
相关问题
HarmonyOS 数据改变刷新页面
970浏览 • 0回复 待解决
HarmonyOS 如何刷新页面内容
230浏览 • 1回复 待解决
怎么在进度条更新时候刷新页面
5108浏览 • 1回复 待解决
如何新页面列表数据
7428浏览 • 1回复 待解决
dialog跳转新页面返回后dialog关闭
623浏览 • 1回复 待解决
HarmonyOS List item 刷新问题
1099浏览 • 1回复 待解决