HarmonyOS 鸿蒙Next Map<String, Object[]> 这种怎么双向绑定

参考数据获取赋值，组件抽离。

import router from '[@ohos](/user/ohos).router';
import ArrayList from '[@ohos](/user/ohos).util.ArrayList';
import fs from '[@ohos](/user/ohos).file.fs';
import { ListFileOptions } from '[@kit](/user/kit).CoreFileKit';
import { fileIo, fileUri } from '[@kit](/user/kit).CoreFileKit';

[@Observed](/user/Observed)
export class ImageSource{
 public myMap: MyMap<string, ImageItem[]>=new MyMap()
}

[@Observed](/user/Observed)
export class MyMap<K, V> extends Map<K, V> {
 public name: string;
 constructor(name?: string, args?: [K, V][]) {
   super(args);
   this.name = name ? name : "Inskam";
 }

 getName() {
   return this.name;
 }
}

[@Observed](/user/Observed)
class ImageItem {
 public name: string=''; //文件名
 public isSelected:boolean=false; //是否选中
}

let ImageItemArr:ImageItem[] = []
let ImageItem1:ImageItem = new ImageItem()
ImageItem1.name = 'pic01.png'
ImageItemArr.push(ImageItem1)

let ImageItem2:ImageItem = new ImageItem()
ImageItem2.name = 'pic02.png'
ImageItemArr.push(ImageItem2)

let ImageItem3:ImageItem = new ImageItem()
ImageItem3.name = 'pic03.png'
ImageItemArr.push(ImageItem3)


const group:MyMap<string, ImageItem[]>  = new MyMap()
group.set('2024-11-13',ImageItemArr)

console.log('new-group',JSON.stringify(group))

[@Entry](/user/Entry)
[@Component](/user/Component)
struct Page241112180655018 {
 [@State](/user/State) mIsEdit: boolean = false;
 [@State](/user/State) mTitleStr: string = '相册';
 [@State](/user/State) mIsPhotoMode: boolean = true;
 private mPhotoList:ArrayList<string> = new ArrayList();
 [@State](/user/State) mPhotoDayList:Array<string>=[];
 [@State](/user/State) imgSs: ImageSource = new ImageSource()

 aboutToAppear() {
   // this.initImgData();
   this.mPhotoDayList = ['2024-11-13']
   this.imgSs.myMap = group
   console.log('new-imgSs',JSON.stringify(this.imgSs))
   console.log('new-imgSs-',JSON.stringify(this.imgSs.myMap.get('2024-11-13')))
 }

 aboutToDisappear(): void {
 }

 onPageShow(): void {
 }



 /**
  * 从沙盒目录初始化文件信息
  */
 initImgData(){
   let fileOption: ListFileOptions = {
     recursion: false,
     listNum: 0,
     filter: {
       suffix: [".jpeg", ".png", ".bmp", ".jpg"]
     }
   }
   fs.listFile(getContext().filesDir, fileOption).then(data => {
     this.imgSs.myMap= this.groupImagesByDate(data);
     console.log('imgSs--',JSON.stringify(this.imgSs.myMap))
   })
 }
 /**
  * 根据文件列表进行分组
  * [@param](/user/param) imageFiles
  * [@returns](/user/returns)
  */
 groupImagesByDate(imageFiles: string[]): MyMap<string, ImageItem[]> {
   this.mPhotoList.clear();
   const groups: MyMap<string, ImageItem[]> = new MyMap();

   imageFiles.forEach(file => {
     // 从文件名中提取时间戳
     const timestamp = new Date().getTime()
     // 将时间戳转换为日期格式
     const date = new Date(timestamp);
     const yyyy = date.getFullYear();
     const mm = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
     const dd = String(date.getDate()).padStart(2, '0');
     const formattedDate = `${yyyy}-${mm}-${dd}`;

     // 按日期进行分组
     if (!groups[formattedDate]) {
       groups[formattedDate] = [];
       this.mPhotoList.add(formattedDate);
     }
     const imgItem:ImageItem= {
       name: file,
       isSelected: false
     }
     groups[formattedDate].push(imgItem);
   });
   this.mPhotoDayList=this.mPhotoList.convertToArray() //mPhotoDayList是数组
   console.log('mPhotoDayList--',JSON.stringify(this.mPhotoDayList))
   console.log('groups--',JSON.stringify(groups))
   return groups;
 }

 build() {
   Column() {
     Row() {
       Image($r('app.media.news_more'))
         .width(40)
         .height(40)
         .padding(10)
         .margin({ left: 5 })
         .onClick(() => {
           router.back();
         })

       Text(this.mTitleStr).fontSize(18).fontWeight(500).fontColor('#333333')

       Image($r('app.media.startIcon'))
         .width(42).padding(10).margin({ right: 5 })
         .onClick(() => {
           this.switchEditMode();
         })

     }
     .width('100%').height(65)
     .justifyContent(FlexAlign.SpaceBetween)
     .margin({ top: 25 })

     List({ space: 20, initialIndex: 0 }) {
       ForEach(this.mPhotoDayList, (item: string) => {
         ListItem() {
           Column() {
             Text(item)
               .width('100%')
               .height(50)
               .fontSize(16)
               .fontColor('#333')
               .textAlign(TextAlign.Start)
             Grid() {
               ForEach(this.imgSs.myMap.get(item), (imgItem: ImageItem) => {
                 GridItem() {
                   GridItemCom({
                     item:imgItem,
                     imgSs:this.imgSs
                   })
                 }
               }, (day: string) => day)
             }
             .columnsTemplate('1fr 1fr 1fr 1fr')
             .columnsGap(10)
             .rowsGap(10)
             .width('100%')
             .margin({ top: 20, bottom: -10 })
             .height(this.imgSs ? (Math.ceil(this.imgSs.myMap.get(item)!!.length / 4) * 85): 85)
           }
         }.editable(true)
       }, (item: string) => item)
     }
     .listDirection(Axis.Vertical) // 排列方向
     .edgeEffect(EdgeEffect.None) // 滑动到边缘无效果
     .chainAnimation(false) // 联动特效关闭
     .onScrollIndex((firstIndex: number, lastIndex: number) => {
       console.info('first' + firstIndex)
       console.info('last' + lastIndex)
     })
     .editMode(this.mIsEdit)
     .width('90%')
     .height('100%')

   }
 }

 /**
  * 编辑模式切换
  */
 switchEditMode() {
   if (this.mIsEdit) {
     this.mTitleStr = '相册';
   } else {
     this.mTitleStr = '已选择';
   }
   this.mIsEdit = !this.mIsEdit;
 }

 /**
  * 切换显示数据
  */
 switchShowDataMode() {
   this.mIsPhotoMode = !this.mIsPhotoMode;
 }
}


[@Component](/user/Component)
struct GridItemCom{
 [@Prop](/user/Prop) imgSs:ImageSource
 [@ObjectLink](/user/ObjectLink) item:ImageItem
 build() {
   Row(){
     Image($r("app.media.app_icon")).width('100%');
     Text(this.item.name)
   }
   .onClick(()=>{
     let name = `${this.item.name}-1`
     this.item.name = name
     console.log(`${name}--${JSON.stringify(this.item)}}`)
     console.log('child-imgSs-',JSON.stringify(this.imgSs.myMap.get('2024-11-13')))
   })
 }
}