HarmonyOS 鸿蒙Next 预览器中都正常,但加载到模拟器中数字都变成NaN
HarmonyOS 鸿蒙Next 预览器中都正常,但加载到模拟器中数字都变成NaN
问题描述
在预览器previewer中都正确,但投放模拟器hvm中数字都变成了NaN。可是IDE中也没有地方显示报错,只是有一则ArkTS警告信息。
下面我们通过一个实例演示这个效果。该实例来源于B站:黑马程序员出品的课程——《P18 17.ArkUI-状态管理-@Observed和@ObjectLink》。
IDE相关截图
PreviewerLog警告信息
[Compile Result] ArkTS:WARN File: x:/.../xxxxxxx.etx:133:39
[Compile Result] The regular property 'taskItem' cannot be assigned to the @ObjectLink property 'item'.
预览器操作Gif
模拟器操作Gif
关于此问题,我的疑问
对于这则警告信息,我有个疑问。对于foreach的第二个参数(页面组件生成函数(taskItem: Task, index) => {...}
)的第一个参数item,我已经指定了他的类型为Task
。那么,为什么IDE不认识?依旧认为它是一个常规属性的变量。
示例代码
@Observed
class Task {
static id: number = 1
// 任务名称
name: string = `任务${Task.id++}`
// 任务状态:是否完成
finished: boolean = false
}
// 统一卡片样式
@Styles function filling_Cards() {
.width('95%')
.padding(20)
.backgroundColor(Color.White)
.borderRadius(15)
.shadow({
radius: 6,
color: '#1F000000',
offsetX: 2,
offsetY: 4
})
}
// 统一完成样式
@Extend(Text) function finished_Task() {
.decoration({ type: TextDecorationType.LineThrough })
.fontColor('#B1B2B1')
}
class Statistics_Info {
// 总任务数量
totalTask: number = 0
// 已完成的任务数量
finishedTask: number = 0
}
@Entry
@Component
struct Prop_Decorator {
@Provide statistics: Statistics_Info = new Statistics_Info()
build() {
Column({ space: 10 }) {
// 1. 任务进度卡片
Task_Statistics()
// 2. 新增任务的按钮
// 3. 任务列表
Task_List()
}
.width('100%')
.height('100%')
.backgroundColor('#F1F2F3')
}
}
@Component
struct Task_Statistics {
@Consume statistics: Statistics_Info
build() {
Row() {
Text('任务进度:')
.fontSize(30)
.fontWeight(FontWeight.Bold)
// Stack——堆叠容器
Stack() {
Progress({
value: this.statistics.finishedTask,
total: this.statistics.totalTask,
type: ProgressType.Ring
})
.width(100)
Row() {
Text(this.statistics.finishedTask.toString())
.fontSize(24)
.fontColor('#F36D')
Text(' / ' + this.statistics.totalTask.toString())
.fontSize(24)
}
}
}
.filling_Cards()
.margin({ top: 20, bottom: 10 })
.justifyContent(FlexAlign.SpaceEvenly)
}
}
@Component
struct Task_List {
@Consume statistics: Statistics_Info
// 任务数组
@State tasks: Task[] = []
// 处理finishedTask和totalTask变量的更新操作
handleTaskChange(val: number) {
if (val == 1) {
// 修改任务总数计数器——通过测量数组长度精确判定
this.statistics.totalTask = this.tasks.length
} else if (val == 2) {
// 更新已完成任务计数器的值
this.statistics.finishedTask = this.tasks.filter(item => item.finished)
.length
} else {
this.statistics.totalTask = this.tasks.length
this.statistics.finishedTask = this.tasks.filter(item => item.finished)
.length
}
}
build() {
Column() {
Button('新增任务')
.onClick(() => {
// 向任务数组新增数组元素
this.tasks.push(new Task())
// 修改任务总数计数器
this.handleTaskChange(1)
})
.width(200)
List({ space: 10 }) {
ForEach(
this.tasks,
(item: Task, index) => {
ListItem() {
Task_Item({
item: item,
onTaskChange: this.handleTaskChange.bind(this)
})
}
.swipeAction({ end: this.deleteButton(index) })
}
)
}
.width('100%')
.alignListItem(ListItemAlign.Center)
.layoutWeight(1)
}
}
@Builder
deleteButton(index: number) {
Button() {
Image($r('app.media.ic_public_delete_filled'))
.fillColor(Color.White)
.width(25)
}
.margin({ left: 5 })
.padding(10)
.type(ButtonType.Circle)
.backgroundColor(Color.Red)
.onClick(() => {
this.tasks.splice(index, 1)
this.handleTaskChange(3)
})
}
}
@Component
struct Task_Item {
@ObjectLink item: Task
onTaskChange: (val) => void
build() {
Row() {
if (this.item.finished) {
Text(this.item.name)
.finished_Task()
} else {
Text(this.item.name)
}
Checkbox()
.select(this.item.finished)
.onChange(val => {
// 更新当前任务的状态
this.item.finished = val
// 更新已完成任务计数器的值
this.onTaskChange(3)
})
}
.filling_Cards()
.justifyContent(FlexAlign.SpaceBetween)
}
}
更多关于HarmonyOS 鸿蒙Next 预览器中都正常,但加载到模拟器中数字都变成NaN的实战教程也可以访问 https://www.itying.com/category-93-b0.html
开发者您好,建议升级一下最新的版本试试。
更多关于HarmonyOS 鸿蒙Next 预览器中都正常,但加载到模拟器中数字都变成NaN的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next中,预览器中显示正常但加载到模拟器中数字变成NaN的问题,可能是由于数据类型或数据绑定方式在模拟器环境中未正确处理。检查以下几点:
-
数据绑定:确保数据绑定正确,特别是涉及数字类型的数据。模拟器可能对数据绑定的处理方式与预览器不同。
-
数据类型:确认数据在传输过程中未被意外转换为字符串或其他类型。NaN通常表示非数字值,可能是数据类型转换错误。
-
模拟器环境:模拟器可能与预览器使用不同的运行时环境或配置,导致数据处理不一致。检查模拟器的配置是否与预览器一致。
-
日志输出:查看运行日志,确认是否有错误或警告信息,可能有助定位问题。
-
版本差异:确保预览器和模拟器使用相同版本的鸿蒙Next,版本差异可能导致行为不一致。
通过以上步骤排查,可定位并解决数字显示为NaN的问题。