HarmonyOS 数组中嵌套对象的属性值发生变化,@Watch监听不到数组的变化,这个要怎么办

代码如下:

@Observed
class ProductModel{
  name:string = ''
  count:number = 0
}
@Entry
@Component
struct ProductListView {
  showTitle:boolean = false;
  jsonString:string = '[{"name":"商品1", "count":"1"},{"name":"商品2", "count":"1"},{"name":"商品3", "count":"1"}]'
  @State @Watch('productListChanged') productList: ProductModel[] = [];
  productListChanged(){
    this.showTitle = !this.showTitle;
  }
  aboutToAppear(): void {
    this.productList = JSON.parse(this.jsonString);
    let list: ProductModel[] = [];
    for (const element of this.productList) {
      let product: ProductModel = new ProductModel();
      product.name = element.name;
      product.count = element.count;
      list.push(product);
    }
    this.productList = list;
  }
  build() {
    Column({space:10}){
      if(this.showTitle){
        Text('标题')
      }
      ForEach(this.productList,(item:ProductModel)=>{
        Column(){
          Text('这里无法刷新__'+`${item.count}`)//此处无法刷新,该怎么解决?
          ProductView({item:item, countChanged:(product)=>{
            //productList数组中嵌套对象item的属性值发生变化,监听不到数组的变化,无法触发productListChanged()方法
          }})
        }
      })
    }.padding(20)
  }
}
@Component
struct ProductView {
  @ObjectLink item: ProductModel;
  countChanged: (item:ProductModel)=>void = ()=>{};
  build() {
    Row(){
      Text(this.item.name)
      Text(`${this.item.count}`)
      Button('数量-1').onClick(()=>{
        this.item.count--
        if (this.countChanged !== undefined) {
          this.countChanged(this.item);
        }
      })
      Button('数量+1').onClick(()=>{
        this.item.count++
        if (this.countChanged !== undefined) {
          this.countChanged(this.item);
        }
      })
    }.width('100%').justifyContent(FlexAlign.SpaceBetween)
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.

数组中嵌套对象的属性值发生变化,@Watch监听不到数组的变化,这个要怎么办?

HarmonyOS
2024-12-26 14:19:03
1074浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
superinsect

参考示例:

import { plainToClass, ClassConstructor } from "class-transformer"
import { BusinessError, request } from '@kit.BasicServicesKit';
@Observed
class ProductModel{
  name: string = ''
  count: number = 0;
}
@Entry
@Component
struct ProductListView {
  //todo 1 父组件同步子组件needFreshCount值变化,在监听事件中增加业务逻辑处理
  @State@Watch('productListChanged') needFreshCount:number = 0;
  @State needFreshCount2:number = 0;
  jsonString:string = '[{"name":"商品1", "count":"1"},{"name":"商品2", "count":"1"},{"name":"商品3", "count":"1"}]'
  @State productList: ProductModel[] = [];
  productListChanged(){
    this.needFreshCount2++;
  }
  aboutToAppear(): void {
    this.productList = jsonToArray(ProductModel, this.jsonString);
  }
  build() {
    Column({space:10}){
      Text('父组件这里没有刷新/或只刷新一次__'+`${this.needFreshCount2}`)
      ForEach(this.productList,(item:ProductModel, index: number)=>{
        Column(){
          //todo 2 Watch监听不到数组中对象属性值变化,needFreshCount
          ProductView({item:item,needFreshCount:this.needFreshCount, countChanged:(product)=>{
          }})
        }
      })
      Child2({needFreshCount:this.needFreshCount,productList:this.productList}).margin({top:50});
    }.padding(20)
  }
}
@Component
struct ProductView {
  @ObjectLink@Watch('productChanged') item: ProductModel;
  @Link needFreshCount:number;
  productChanged(){
    //todo 3 监听productList 数组中某个对象属性值发生变化,与父组件绑定一个变量needFreshCount,在父组件中监听needFreshCount变化
    this.needFreshCount++;
  }
  countChanged: (item:ProductModel)=>void = ()=>{};
  build() {
    Row(){
      Text(this.item.name)
      Text(`${this.item.count}`)
      Button('数量-1').onClick(()=>{
        this.item.count--
        if (this.countChanged !== undefined) {
          this.countChanged(this.item);
        }
      })
      Button('数量+1').onClick(()=>{
        this.item.count++
        if (this.countChanged !== undefined) {
          this.countChanged(this.item);
        }
      })
    }.width('100%').justifyContent(FlexAlign.SpaceBetween)
  }
}
@Component
struct Child2 {
  @Link@Watch('productChanged') needFreshCount:number;
  @State childNeedFreshCount:number = 0;
  @Prop productList: ProductModel[];
  productChanged(){
    //todo 4 监听 needFreshCount,同步父组件变化
    this.childNeedFreshCount++;
  }
  build() {
    Column(){
      Text('第二个子组件,要监听父组件productList数组的变化')
      Text('子组件这里也没有刷新/或只刷新一次__'+`${this.childNeedFreshCount}`)
    }
  }
}
function jsonToArray<T>(cls: ClassConstructor<T>, jsonStr: string): Array<T> {
  try {
    return plainToClass(cls, JSON.parse(jsonStr), { enableImplicitConversion: false, exposeDefaultValues: true }) as Array<T>
  } catch (err) {
    let error = err as BusinessError;
    return []
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
分享
微博
QQ
微信
回复
2024-12-26 16:40:59


相关问题
如何监听数组对象属性变化
3173浏览 • 1回复 待解决
HarmonyOS 页面高度发生变化
941浏览 • 1回复 待解决