HarmonyOS鸿蒙Next中列表数据源是interface类型，无法添加装饰器如何刷新UI

背景知识：

楼主，修改数组对象的字段属性不能使用 @State 更新到对象里面的属性。如图用法

既然不能直接使用@State来更新那就只能找到可以更新对象数据的装饰器了，可以使用@Observed和@ObjectLink。

@Observed 作用在类属性上，

@ObjectLink 使用在变量需要修改的地方上

注意：列表item也需要抽离出来，因为在@Entry 装饰上的布局不能使用@ObjectLink

问题解决：

参考代码：

[@Entry](/user/Entry)
@Component
struct InterfaceListPage {
    [@State](/user/State) messageList: IMessageModel[] = []

    aboutToAppear(): void {
        this.messageList.push(new SystemMessageModel('您已开通vip会员', '15:31'))
        for (let index = 1; index < 20; index++) {
            this.messageList.push(new NormalMessageModel(`这是一条消息${index}`, `昵称${index}`, `20:${index}`))
        }
    }

    build() {
        Column() {
            List({ space: 12 }) {
                ForEach(this.messageList, (item: IMessageModel) => {
                    ListItem() {
                      //抽离一个item，使用一个新的组件(无[@Entry](/user/Entry))
                        MessageItem({item:item})
                    }
                })
            }
            .layoutWeight(1)
        }
        .height('100%')
        .width('100%')
        .backgroundColor('#efefef')
    }


}

//抽出来的item布局
@Component
struct MessageItem{
    [@ObjectLink](/user/ObjectLink) item:IMessageModel
    build() {
        Row({ space: 10 }) {
            Image(this.item.getAvatar())
                .width(50)
                .height(50)
                .borderRadius(100)

            Column({ space: 8 }) {
                Text(this.item.getNickname())
                    .fontSize(14)

                Text(this.item.getContent())
                    .fontSize(12)
                    .fontColor('#666666')
            }
            .layoutWeight(1)
            .alignItems(HorizontalAlign.Start)

            Column({ space: 8 }) {
                Text(this.item.getTime())
                    .fontSize(12)
                    .fontColor('#999999')

                Text(this.item.getUnreadCount() + '')
                    .fontSize(8)
                    .width(15)
                    .borderRadius(100)
                    .height(15)
                    .backgroundColor(Color.Red)
                    .textAlign(TextAlign.Center)
                    .fontColor(Color.White)
                    .visibility(this.item.getUnreadCount() ? Visibility.Visible : Visibility.None)
            }
        }
        .width('100%')
        .padding(12)
        .constraintSize({ maxWidth: '100%' })
        .margin({ left: 15, right: 15 })
        .backgroundColor(Color.White)
        .borderRadius(10)
        .shadow(ShadowStyle.OUTER_DEFAULT_XS)
        .onClick(() => {
            if (this.item instanceof SystemMessageModel) {
                this.item.unreadCount ++
            } else if (this.item instanceof NormalMessageModel) {
                this.item.unreadCount ++
            }
            console.log('item = ' , JSON.stringify(this.item))
        })
    }
}

interface IMessageModel {
    getContent(): string

    getNickname(): string

    getAvatar(): string

    getTime(): string

    getUnreadCount(): number
}

//在对象上使用 Observed 装饰器
[@Observed](/user/Observed)
class NormalMessageModel implements IMessageModel {
    content?: string
    nickname?: string
    avatar: string = 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3517856700,1330290746&fm=253&gp=0.jpg'
    time?: string
    unreadCount: number = 0

    constructor(content: string, nickname: string, time: string) {
        this.content = content
        this.nickname = nickname
        this.time = time
    }

    getContent(): string {
        return this.content || '暂不支持的消息类型'
    }

    getNickname(): string {
        return this.nickname || '未知对象'
    }

    getAvatar(): string {
        return this.avatar
    }

    getTime(): string {
        return this.time || ''
    }

    getUnreadCount(): number {
        return this.unreadCount
    }
}

//在对象上使用 Observed 装饰器
[@Observed](/user/Observed)
class SystemMessageModel implements IMessageModel {
    content?: string
    time?: string
    nickname: string = '系统消息'
    avatar: string = 'https://img.ixintu.com/download/jpg/20201129/eb3d1c2ebd8062f013c740ee3b0da91c_512_512.jpg'
    unreadCount: number = 0

    constructor(content: string, time: string) {
        this.content = content
        this.time = time
    }

    getUnreadCount(): number {
        return this.unreadCount
    }

    getContent(): string {
        return this.content || '暂不支持的消息类型'
    }

    getNickname(): string {
        return this.nickname
    }

    getAvatar(): string {
        return this.avatar
    }

    getTime(): string {
        return this.time || ''
    }
}

真机演示：