【HarmonyOS NEXT】包含Header的列表使用嵌套数组,列表因无法监听到数据更新导致无法刷新

【关键字】

List / 嵌套数组 / Header / @State / 自定义类型 / 自定义类型数组 / 无法刷新

【问题描述】

使用List显示一个年级所有班级里的所有学生。ListItemGroup Header显示班级名称,能够悬停;ListItem显示当前班级的所有学生名称。数据更新时,列表无法监听到,导致无法刷新。

代码如下:

// 班级Model
import hilog from '@ohos.hilog'
class LCClassModel {
cId: string
cName: string
students: LCStudentArray = []

constructor(cId: string, cName: string, students: LCStudentArray = []) {
this.cId = cId
this.cName = cName
this.students = students
}
}

// 学生Model
@Observed
class LCStudentModel {
id: string
name: string

constructor(id: string, name: string) {
this.id = id
this.name = name
}

}

@Observed
class LCStudentArray extends Array<LCStudentModel> {}

@Entry
@Component
struct Index {
@State classes: LCClassModel[] = null
// 自定义 List Header
@Builder
classHeader(classModel: LCClassModel, index: number) {
Row() {
Text(classModel.cName)
.fontWeight(FontWeight.Medium)
.fontSize(20)
}
.width('100%')
.height('40')
.backgroundColor(Color.Red)
.onClick(() => {
let count = classModel.students.length
classModel.students.push( new LCStudentModel(`id_class${index}_${count}`, `name_class${index}_${count})`))
hilog.debug( 1, 'lc_saobei', JSON.stringify(this.classes))
})
}

aboutToAppear() {
this.classes = [
new LCClassModel('cID_0', '**鸿蒙先行班', [
new LCStudentModel('id_class0_0', 'name_class0_0')
])
]
}

build() {
Column() {
List() {
ForEach(this.classes, (classModel: LCClassModel, index) => {
ListItemGroup({ header: this.classHeader(classModel, index) }) {
ForEach(classModel.students, (studentModel: LCStudentModel) => {
ListItem() {
Row() {
Text(studentModel.name)
.fontSize(16)
}
.width('100%')
.height('30')
}
})
}
})
}
.sticky(StickyStyle.Header) // Header 悬停
}
}
}

【解决方案】

@State装饰器当前支持的变量类型为Object、class、string、number、boolean、enum类型以及这些类型的数组,Date类型,API11及以上支持Map、Set类型。不支持自定义类型和自定义类型数组。

因此,当自定义类型里的属性值发生变化时,无法触发页面刷新。

参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-state-0000001774279614#ZH-CN_TOPIC_0000001774279614__装饰器使用规则说明

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值