HarmonyOS 鸿蒙Next @observed/@objectLink装饰器父子组件对象传递时属性‘id’未自增变为NaN原因

HarmonyOS 鸿蒙Next @observed/@objectLink装饰器父子组件对象传递时属性‘id’未自增变为NaN原因

@Observed

class Task{
  static id: number = 1
  // 任务名称
  name: string = `任务${Task.id++}`
  // 任务状态：是否完成
  finished: boolean = false
}

class StatInfo{
  totalTask: number = 0
  finishTask: number = 0
}

//颜色加灰
@Extend(Text) function finishedTask(){
  .decoration({type:TextDecorationType.LineThrough})
  .fontColor('#B1B2B1')
}

@Component
export struct TaskList {
  @State tasks: Task[]=[]
  @Consume sta:StatInfo
  handleTasksChange(){
    this.sta.totalTask=this.tasks.length //更新任务总数量
    this.sta.finishTask=this.tasks.filter(item=>item.finished).length //更新当前已完成的任务数量
  }
  build() {
    Column(){
      //2.新增任务按钮
      Button('新增任务')
        .width(200)
        .onClick(()=>{
          this.tasks.push(new Task())
          this.handleTasksChange()
        })
      // 3.任务列表
      List({space:10}){
        ForEach(
          this.tasks,
          (item:Task,index)=>{
            ListItem(){
              TaskItem({item:item,OnTaskChange:this.handleTasksChange.bind(this)})
            }.swipeAction({end:this.deleteButton(index)})
          }
        )
      }
      .width('100%')
      .layoutWeight(1)
      .alignListItem(ListItemAlign.Center)
    }
  }
  @Builder deleteButton(index:number){
    Button(){
      Image($r('app.media.ic_public_delete_filled'))
        .fillColor(Color.White)
        .width(20)
    }
    .width(40)
    .height(40)
    .type(ButtonType.Circle)
    .backgroundColor(Color.Red)
    .margin(5)
    .onClick(()=>{
      this.tasks.splice(index,1)
      this.handleTasksChange()
    })
  }
}

@Component
struct TaskItem {
  @ObjectLink item:Task
  OnTaskChange:() => void
  build() {
    Row(){
      if (this.item.finished){
        Text(this.item.name)
          .finishedTask()
      }else {
        Text(this.item.name)
      }
      Checkbox()
        .select(this.item.finished)
        .onChange(val=>{
          //更新当前任务的状态
          this.item.finished=val
          //更新当前已完成的任务数量
          this.OnTaskChange()
        })
    }
    .card()
    .justifyContent(FlexAlign.SpaceBetween)
  }
}

@Component
struct PropPage {
  // 统计信息,总任务数量
  @Provide sta:StatInfo = new StatInfo()

  build() {
    Column({
      space: 10
    }){
      // 1.任务进度卡片
      TaskStaticsComponent()
      //任务列表
      TaskList()
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F1F2F3')
  }
}