HarmonyOS 状态管理装饰器 Observed与ObjectLink 处理嵌套对象/对象数组 结构双向绑定

news/2024/2/27 17:32:25

本文 我们还是来说 两个 harmonyos 状态管理的装饰器

@Observed与@ObjectLink
他们是用于 嵌套对象 或者 以对象类型为数组元素 的数据结构 做双向同步的
之前 我们说过的 state和link 都无法捕捉到 这两种数据内部结构的变化

这里 我们模拟一个类数据结构

class Person{name: stringage: numbergf: Personconstructor(name: string, age: number,gf?: Person) {this.name = name;this.age = age;this.gf = gf;}
}

Person类 三个字段 name字符串 age数字 gf字段又套一个Person类对象
然后 我们构造器 通过构造方法接到外面传的参数 给我们类自己的属性赋值

然后 我们组件这样写

@Entry
@Component
struct Dom {@State p: Person =new Person('小猫猫',21,new Person('小小猫猫', 18))build() {Row() {Column() {Text(this.p.gf.name)Button("修改").onClick(()=>{this.p.gf.name = "小狗狗";})}.width('100%')}.height('100%')}
}

这里 我们声明一个 叫 p的变量 类型为我们上面定义的 Person 类类型 然后new实例化一个Person 对象 第一个参数 字符串类型的 小猫猫 第二个参数 数字类型的 21
然后 第三个参数 在new一个Person对象 因为 gf 我们给的类型本来就是Person
第一个参数 字符串类型 值为 小小猫猫 第二个参数 数字类型 18 这里 我们不需要继续往下套了 就第三个参数不传就好了

然后 我们Text组件 展示了这个 p对象下的gf字段 下的 name字段
然后 我们Button按钮的点击事件更改这个name 为小狗狗

运行之后 我们 p.gf.name 的展示没问题
在这里插入图片描述
但是 当我们点击按钮时 大家会发现 Text中的内容并没有变成小狗狗 依旧是 小小猫猫
在这里插入图片描述
其实数据依旧变了 但是 我们用的是 State装饰 它监听不到这么深的对象结构

这里 我们可以用 Observed加ObjectLink解决
首先 你要将 需要用ObjectLink处理的类 上面加上 Observed 装饰器

@Observed
class Person{name: stringage: numbergf: Personconstructor(name: string, age: number,gf?: Person) {this.name = name;this.age = age;this.gf = gf;}
}

然后 你要将 需要被监听的元素加上 ObjectLink修饰

我们将组件代码改成这样

@Entry
@Component
struct Dom {@State p: Person =new Person('小猫猫',21,new Person('小小猫猫', 18))build() {Row() {Column() {Domismin({p: this.p.gf})Button("修改").onClick(()=>{this.p.gf.name = "小狗狗";})}.width('100%')}.height('100%')}
}
@Component
struct Domismin {@ObjectLink p: Person;build() {Text(this.p.name)}
}

这里 我们多定义了一个 Domismin 组件
里面就一个Text组件 用来展示 传进来的p属性的name
然后 我们外面组件 将 p的gf字段 传给Domismin 组件做p属性 其实主要就是为了让 gf加上ObjectLink
因为 在new时 是加不了注解的 所以 要多弄一个组件来绑

此时 我们点击内容就修改了
在这里插入图片描述

这样 我们对象嵌套类型的就说完了

然后 还有我们数组元素为对象的格式了
先定义一个这样的对象

class Person{name: stringage: numberconstructor(name: string, age: number) {this.name = name;this.age = age;}
}

就是个普通对象 两个字段 name 字符串类型 age 数字类型 构造器接受两个参数 然后给自己的属性赋值

然后 组件中这样写

@Entry
@Component
struct Dom {@State p: Person[] = [new Person('小猫猫',21),new Person('小狗狗',12),new Person('小鲤鱼',13)]build() {Row() {Column() {ForEach(this.p,(item,index)=>{Row(){Text(item.name)Button("修改").onClick(()=>{item.name = "我被修改了";})}})}.width('100%')}.height('100%')}
}

我们先定义一个 p 字段 state修饰 类型为 数组 其中所有元素类型为 Person
然后 初始 我们默认写了三条数据进去
然后用 ForEach 循环渲染元素
Text展示 Button点击触发修改 当前循环这个元素的name属性
在这里插入图片描述
然后 我们尝试点击小鲤鱼的修改按钮
在这里插入图片描述
会发现 没有修改 还是因为 state并检查不到这么深

然后 还是老规矩 只有被 Observed装饰的类 实例化出来的对象 才能装饰 ObjectLink

@Observed
class Person{name: stringage: numberconstructor(name: string, age: number) {this.name = name;this.age = age;}
}

然后组件改成这样

@Entry
@Component
struct Dom {@State p: Person[] = [new Person('小猫猫',21),new Person('小狗狗',12),new Person('小鲤鱼',13)]build() {Row() {Column() {ForEach(this.p,(item,index)=>{Row(){Domismin({p: item})Button("修改").onClick(()=>{item.name = "我被修改了";})}})}.width('100%')}.height('100%')}
}@Component
struct Domismin {@ObjectLink p: Person;build() {Text(this.p.name)}
}

简单说 还是定义一个子组件 将数组下的每一个元素对象 都绑定上 ObjectLink
然后 我们再次点击 小鲤鱼边上的修改按钮
在这里插入图片描述
这样就修改成功了


http://www.ppmy.cn/news/1350510.html

相关文章

React18原理: 渲染与更新时的重点关注事项

概述 react 在渲染过程中要做很多事情,所以不可能直接通过初始元素直接渲染还需要一个东西,就是虚拟节点,暂不涉及React Fiber的概念,将vDom树和Fiber 树统称为虚拟节点有了初始元素后,React 就会根据初始元素和其他可…

【自然语言处理】:实验1布置,Word2VecTranE的实现

清华大学驭风计划 因为篇幅原因实验答案分开上传,后续持续更新中,请敬请期待 如果需要详细的实验报告或者代码可以私聊博主 有任何疑问或者问题,也欢迎私信博主,大家可以相互讨论交流哟~~ 实验1: Word2Vec&Tra…

linux下ipconfig命令报:command not found 解决方法

参考博文: linux下ipconfig命令报:command not found 解决方法 CentOS7更新yum报Could not resolve host:mirrorlist.centos.org; Unknown error解决办法

SpringCloud-项目引入Nacos

一、安装Nacos服务 首先,我们需要从 Nacos 的官方网站下载发布版本。下载地址:Releases alibaba/nacos GitHub 选择合适的版本并下载,解压缩得到 Nacos 的安装包。 在解压后的 Nacos 目录中,找到 bin 文件夹。 用写字板编辑…

【Ubuntu 20.04/22.04 LTS】最新 esp-matter SDK 软件编译环境搭建步骤

仓库链接:esp-matter SDK官方软件说明:ESP Matter Programming Guide官方参考文档:使用 Matter-SDK 快速搭建 Matter 环境 (Linux) 环境要求 Ubuntu 20.04 或 Ubuntu22.04网络环境支持访问 Gihub 在安装 esp-matter SDK 软件编译环境之前&a…

梯度提升树系列7——深入理解GBDT的参数调优

目录 写在开头1. GBDT的关键参数解析1.1 学习率(learning rate)1.2 树的数量(n_estimators)1.3 树的最大深度(max_depth)1.4 叶子节点的最小样本数(min_samples_leaf)1.5 特征选择的比例(max_features)1.6 最小分裂所需的样本数(min_samples_split)1.7 子采样比例(…

【数据结构】14 队列(带头结点的链式存储和顺序存储实现)

定义 队列是一个有序线性表,但是队列的插入、删除操作是分别在线性表的两个不同端点进行的。 设一个队列 Q ( a 1 , a 2 , . . . , a n ) Q (a_1, a_2,...,a_n) Q(a1​,a2​,...,an​),那么 a 1 a_1 a1​被称为队头元素, a n a_n an​为队…

「Linux」基础命令

目录结构 Linux只有1个顶级目录,称为“根目录”路径之间的层级关系,使用/来表示,例如:/usr/local/hello.txt 开头的/表示根目录后面的/表示层级关系 命令入门 命令的通用格式:command [ -options ] [ parameter] c…

软件架构与系统架构:区别与联系的分析

软件架构与系统架构:区别与联系的分析 在信息技术领域,软件架构和系统架构这两个术语经常被提及。尽管它们在某些方面有重叠,但它们确实代表了不同的概念和聚焦点。理解这两种架构之间的区别和联系对于任何从事技术开发和设计的专业人士都是至…

PMP-情景模拟学习法-识别项目阶段

《指南》和题目中采用了一种默认划分方法,把项目分为:启动、规划、执行和收尾这四个通用阶段。PMP考试和每个问题几乎都是基于特定阶段的情况提出的。 第一,启动阶段:项目章程正式批准之前的时间,可以统称为启动阶段&a…

已解决org.springframework.web.HttpMediaTypeNotSupportedException异常的正确解决方法,亲测有效!!!

已解决org.springframework.web.HttpMediaTypeNotSupportedException异常的正确解决方法,亲测有效!!! 文章目录 问题分析 报错原因 解决思路 解决方法 总结 问题分析 在开发基于Spring框架的Web应用时,我们可能…

【JavaScrpt 漫游】【015】JSON 对象简记

文章简介 本文为【JavaScript 漫游】专栏的第 015 篇文章,主要是对 JS 语言中的 JSON 对象的知识点进行了简要记录。 JSON 格式JSON 对象JSON.stringify()JSON.parse() JSON 格式 JSON 格式(JavaScript Object Notation 的缩写)是一种用于…

第十二周学习报告

比赛 参加了一场 div 2 ,B 题,C 题没写出来,B 是一个排序去重+双指针,C题是要观察出一个数学结论(因为数据范围太大,我暴力做直接超时了) 排 6253 ,表现分是 998 &…

[JavaWeb玩耍日记]Maven的安装与使用

目录 一.作用 二.安装 三.使用 2.对项目使用compile命令进行编译,看看新的文件会在哪里产生? 3.需要认识的命令 4.Maven对项目执行不同命令的生命周期特点? 5.如何导入工程外的Maven? 6.如何直观地查看Maven导入了哪些工程或哪些jar包…

LeetCode:67.二进制求和

67. 二进制求和 - 力扣(LeetCode) 又是一道求和题,% / 在求和的用途了解了些, 目录 题目: 思路分析: 博主代码: 官方代码: 每日表情包: 题目: 思路分析&#xf…

Linux操作系统基础(七):Linux常见命令(二)

文章目录 Linux常见命令(二) 一、kill命令 二、ifconfig命令 三、clear命令 四、重启与关机命令 五、which命令 六、hostname命令 七、grep命令 八、|管道 九、useradd命令 十、userdel命令 十一、tar命令 十二、su命令 十三、ps命令 Linu…

lv15 驱动高级设备模型 1

之前的驱动操作称为硬编 一、起源 仅devfs(dev目录),导致开发不方便以及一些功能难以支持: 热插拔(如何插入一个设备然后找到设备的驱动应用到程序中) 不支持一些针对所有设备的统一操作(如电…

网络安全漏洞管理十大度量指标

当前,网络安全漏洞所带来的风险及产生的后果,影响到网络空间乃至现实世界的方方面面,通信、金融、能源、电力、铁路、医院、水务、航空、制造业等行业各类勒索、数据泄露、供应链、钓鱼等网络安全攻击事件层出不穷。因此,加强对漏…

OpenCV-36 多边形逼近与凸包

目录 一、多边形的逼近 二、凸包 一、多边形的逼近 findContours后的轮廓信息countours可能过于复杂不平滑,可以用approxPolyDP函数对该多边形曲线做适当近似,这就是轮廓的多边形逼近。 apporxPolyDP就是以多边形去逼近轮廓,采用的是Doug…

MySQL ——group by子句使用with rollup

group by 子句使用with rollup关键字之后,具有分组加和的功能。即:在所有的分组记录之后,自动新增一条记录,从全局计算所有记录的数据。 0 问题描述 求出每年的学生平均成绩,及历史至今的平均成绩,结果保留…
最新文章