Demo：
ArrayPage.ets
@Entry
@Component
struct ArrayPage {
@State info: DataBean = new DataBean(1, "qq", [
new DataBeanItem(11, 'qq11')
]);
@State infos: DataBean[] = [];
@Builder
itemHead(databean: DataBean) {
Text(`id:${databean.id} name:${databean.name}`)
}
build() {
Row() {
Column() {
List() {
ListItemGroup({ header: this.itemHead(this.info) }) {
ForEach(this.info.items, (item: DataBeanItem) => {
ListItem() {
Text(`childinfo: ${item.childName}`)
}
})
}
}
Button('添加二层数据1').onClick(() => {
this.info.items = this.info.items.concat([new DataBeanItem(12, 'qq12')])
})
Button('添加二层数据2').onClick(() => {
this.info.items.push(new DataBeanItem(12, 'qq12'))
})
List() {
ForEach(this.infos, (info: DataBean) => {
ListItemGroup({ header: this.itemHead(info) }) {
RecordItem({ info: info })
}
})
}
Button('添加一层数据1').onClick(() => {
this.infos = [
new DataBean(1, 'ww', []),
new DataBean(2, 'rr', [new DataBeanItem(21, 'rr21')])
]
})
Button('添加一层数据2').onClick(() => {
this.infos.push(new DataBean(3, 'ww', []), new DataBean(4, 'rr', [new DataBeanItem(41, 'rr21')]))
})
}
.width('100%')
}
.height('100%')
}
}
子组件：
@Component
export struct RecordItem {
@ObjectLink info: DataBean;
build() {
Column() {
ForEach(this.info.items, (item: DataBeanItem) => {
ListItem() {
Text(`childinfo: ${item.childName}`)
}
})
Button('添加二层数据1').onClick(() => {
this.info.items = this.info.items.concat([new DataBeanItem(12, 'qq12')])
})
Button('添加二层数据2').onClick(() => {
this.info.items.push(new DataBeanItem(12, 'qq12'))
})
}
}
}
使用ObjectLink时需要标注的对象
@Observed
export class DataBean {
id: number = 0;
name: string = '';
items: DataBeanItem[] = [];
constructor(id: number, name: string, items: DataBeanItem[]) {
this.id = id;
this.name = name;
this.items = items;
}
}
@Observed
export class ArrayDataBeanItem extends Array<DataBeanItem>{
}
@Observed
export class DataBeanItem {
childId: number = 0;
childName: string = '';
constructor(childId: number, childName: string) {
this.childId = childId;
this.childName = childName;
}
}
